iphone - iPhone css悬停应该回到正常的“取消悬停”

Question

我正在为 iPhone 开发一个网络应用程序……</p>

我用以下 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%);
}

Answer 1

CSS 中的悬停不是那样工作的。相反，您将不得不使用特定于触摸的 javascript ( ontouchstartand 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";
}

您可能还应该使用媒体查询来禁用 Javascript 所针对的设备的悬停 CSS。