iPhone CSS懸停應該回到正常的「unhover」

我正在爲iPhone web應用程序...iPhone CSS懸停應該回到正常的「unhover」

我做了一個「按鈕」與下面的CSS，當你點擊它（：懸停）它改變，但是當你釋放時，它應該回到正常模式......我該怎麼做？

.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%); 
}

來源

2013-04-09 eds1999

如果這僅僅適用於iOS，不要使用'：hover'，因爲它有點武斷（或者看起來），它實際上是如何在觸摸設備上實現的。 – 2013-04-09 20:23:14

懸停在CSS中不起作用。相反，您將不得不使用特定於觸摸的javascript（ontouchstart和ontouchend），並向代表「向下」狀態的按鈕添加一些類。

例如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"; 
}

你或許應該也使用媒體查詢禁用懸停CSS對於那些被Javascript定位的設備。

來源

2013-04-09 20:14:02

iPhone CSS懸停應該回到正常的「unhover」

回答

相關問題