css-iphone-CSS中懸停的問題

iphone-CSS中懸停的問題

使用下面的CSS創建了一個button，在鼠標懸停的時候會改變，但是鼠標離開之後，應該恢復正常狀態，要怎麼實現？

.button {
height:40px;
width:95px;
margin-top:10px;
float:left;
overflow:hidden;
margin-left:14px;
background-image: -webkit-linear-gradient(bottom, #558544 0%, #5EA83D 100%);
border-radius: 12px;
border-style:solid;
border-color:#558544;
border-width:5px; }

.button:hover {
    background-image: -webkit-linear-gradient(bottom, #5EA83D 0%, #558544 100%);
}

最佳回答：

CSS中的懸停不是那麼運行的，你需要使用指定的javascript(ontouchstart 和ontouchend)，給按鈕添加一些類來處理"down"動作。

舉個栗子：
HTML

<div class="button" ontouchstart="buttonTouchStart(event)" ontouchend="buttonTouchEnd(event)" ></div>

javascript

var buttonTouchStart = function(e) {
    var t = e.target;
    t.className = "button down";
}
var buttonTouchEnd = function(e) {
    var t = e.target;
    t.className = "button";
}

可能還需要使用媒體查詢禁用一些針對javascript 懸停CSS設備。