移动端链接的hover样式问题

问题：原本hover样式是鼠标悬浮显示，不悬浮就消失了的，但在移动端，点击后才显示hover样式，此后如果我们不做处理，那么hover样式就一直存在。

 

方法：

1、判断当前设备是什么设备。

通过设备宽度@media screen and（...）
进而设置移动端和pc的样式。

弊端：因为pc端网页窗口也能缩小到500px，手机的窗口大小也是不定的，有些很大，有些很小，所以通过这种方法，不是太好。

2、既然无法从宽度来解决问题，那么我们可以采用判断设备是否具备hover事件来决定是否显示hover样式。

pc端支持hover事件。移动端不支持

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

具体参见https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover

参考 https://blog.csdn.net/m0_46627730/article/details/105652391