移动端实现像PC端hover状态的几种办法

之前做的移动端页面时都没有考虑到交互体验问题，所用想加个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时，元素在点击时将不可见。大部分安卓设备也支持这个属性，但是各个类型的设备显示的效果不同，表现为一个边框， 这个属性的值会表现为边框的颜色；可以根据项目需要做对应的设置即可。