平时我们写网页的时候，通常会使用
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鼠标移开后：
移动端点击后：