2 daffodilgirl DaffodilGirl 于 2013.04.10 10:28 提问

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

1个回答

redCoral_
redCoral_   2013.04.10 15:29
已采纳

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设备。

DaffodilGirl
DaffodilGirl 多谢多谢
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片