之前做的移动端页面时都没有考虑到交互体验问题,所用想加个hover状态,但移动端没有鼠标,因此只能用别的方式,如下:
1. 用css中的伪类:active实现
button {
background-color: blue;
&:active {
background-color: green;
}
}
这种方式很方便,也比较容易处理,但是这样做会有兼容性问题,在ios端失效;因此可以做个兼容,在代码中加上如下代码即可:
document.body.addEventListener("touchstart", function() {});
2. 用webkit-tap-highlight-color这个属性,这个不是标准属性,被用于设置超链接被点击时高亮的颜色,在ios设备上表现为一个半透膜的灰色背景,但也可以自定义设置颜色,如果没有设置颜色的透明度(alpha),将使用默认的透明度,alpha为0时,将禁用高亮,alpha为1时,元素在点击时将不可见。大部分安卓设备也支持这个属性,但是各个类型的设备显示的效果不同,表现为一个边框, 这个属性的值会表现为边框的颜色;可以根据项目需要做对应的设置即可。