为什么hover在手机上没效果？

让我们再回顾一下hover的定义…

:hover用于选择鼠标指针浮动在上面的元素。

再想一想…

手机上哪来的鼠标啊伙计？！

SO,手机端没有hover特效，当你点击的时候就直接触发click。

解决方案

首先，经试验发现，设置的：hover在Android系统上点击会出现，但是需要再次点击才会消失；

IOS系统上点击无法出现；

手机虽然没有鼠标，但是有触摸事件.

一开始触摸事件是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候， PC端的鼠标和键盘事件是不够用的。

在iPhone 3G发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

3.touchend事件：当手指从屏幕上离开的时候触发。

4.touchcancel事件：touchcancel，是在拖动中断时候触发。

版权声明：本文为CSDN博主「jnshu_it」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/jnshu_it/article/details/85759010