在开发触摸屏下的网页时，常常会发现hover所带来的效果并不完美，在iOS系统下，hover的效果并不展现，只有当手指点击时才出现效果，并且返回页面的时候，hover的状态一直保留，所以我们需要使用active伪类来为触摸屏下的网站实现一个点击效果。 如果使用ios系统的朋友还应当有所发现，即点击按钮或链接时，会有一个高亮区域，半透明的黑色背景 那么我们如何来改变这个黑色块的样式？ 在iOS设备中，有一个名为-webkit-tap-highlight-color的属性，即定义了用户点击按钮时所产生的高亮背景 想要禁用这样的高亮效果，我们就需要将他的颜色值改为完全透明

代码如下

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

这是我们就屏蔽了默认的点击黑色背景块的显示。然后接下来我们对我们的按钮进行一个点击设置

首先我们先设置一下CSS

body {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
.btn {
width:100px;
height:40px;
background: #000;
color:#fff;
font:normal 14px/40px "Microsoft Yahei";
}
.btn:active {
line-height: 50px;
}

HTML

<div class="btn">Click Me</div>

仅仅这样还是无法实现点击的效果，因为我们还需要屏蔽默认的触摸事件，这里需要借助JS的帮忙

window.onload=function(){
document.addEventListener("touchstart", function(){}, true);
}

点击查看DEMO