hover伪类的表现

hover表示的是指针移动到元素上的瞬间。我们常写hover伪类样式来提示用户指针的位置，给出积极的反馈，防止用户迷失。下面是带有hover样式的按钮:

如果你是在触摸屏上浏览该网页，那么极大可能hover效果与你期望的不一样。经常遇到的一种是被叫做sticky hover的效果，就是触摸设备无法正确识别hover，导致hover一直持续到用户点击其他位置才结束。

所以前端一般需要针对非触摸和触摸设备设计不同的按钮交互效果:非触摸上保持hover效果，触摸上移除hover效果，替换成其他效果(比如active)。

如果要这样做，问题便简化成如下两种:

如何检测设备是否支持hover效果？
如何检测触摸设备？

媒体查询检测是否支持hover


.button-1 {
  background-color: black;  
}

@media (hover:hover) {
  .button-1:hover {
    background-color: #ebb10d;
  }
}

@media (hover:none) {
  .button-1:active {
    background-color: #ebb10d;
  }
}

我们期望的表现是在pc上hover时背景色变成黄色，在触摸屏上点击时才变色。但实际上并不是这样的。最根本的原因在于我们以为hover这个媒体查询特性，能够检测出正确的hover，但实际上它只会检测输入设备能否hover，而无论正确与否。

媒体查询检测触摸设备


.button-2 {  
  background-color: black;
}

@media (pointer:fine) {
  .button-2:hover {
    background-color: #ebb10d;
  }
}

@media (pointer:coarse) {
  .button-2:active {
    background-color: #ebb10d;
  }
}

通过pointer媒体查询特性能够实现我们的需求，但是因为IE不支持这个特性，如果要兼容IE，至少要保证hover效果。


.button-11 {
  background-color: black;
}

.button-11:hover {
  background-color: #ebb10d;
}

@media (pointer:coarse) {
  .button-11:hover {
    background-color: black;
  }

  .button-11:active {
    background-color: #ebb10d;
  }
}