解决hover影响移动端样式

平时我们写网页的时候，通常会使用hover使得网页效果更好，但我们一旦切换到移动端显示时，我们会发现效果很糟糕。原本hover样式是鼠标悬浮显示，不悬浮就消失了的，但在移动端，我们点击后才显示hover样式，此后如果我们不做处理，那么hover样式就一直存在…

问题图：
pc鼠标悬浮时，显示样式：

pc鼠标移开后，样式消失：

移动端点击后，样式不消失：

要解决这个问题，当然首先要判断当前设备是什么设备。

但如何判断又是一个问题，有人会想到通过设备宽度来判断，用@media screen and（...）
来设置移动端和pc的样式。但这个来处理hover并不好，因为pc端网页窗口也能缩小到500px，手机的窗口大小也是不定的，有些很大，有些很小，所以通过这种方法，不是太好。

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

解决方式：

通过查阅媒体特性可知，any-hover是用来查看设备是否支持hover事件的。

@media (any-hover: hover){
	在这写hover样式
}

效果图：

pc鼠标悬浮时：

pc鼠标移开后：

移动端点击后：