手机上hover效果时应该怎么办？

【CSS-task7】如果是在手机上查看投票页，没有hover效果时应该怎么办？

小课堂【武汉第104期】

分享人：万维娜

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

怎么发现hover在手机上没效果？

某一天夜晚，观天象异星突现，猛然一惊，急忙拿出手机检查白日刚修炼到第七层的CSS功法，想着hover光环效果乃我得意之作，可万万不能有事！手止不住的颤抖着，点击屏幕都十分费劲，五分钟后，终于运行出了第七层功法--投票页，触上玩家卡牌区域....

该死的！我的hover呢？？？

2.知识剖析

2.1 hover是什么？

W3C定义----

:hover用于选择鼠标指针浮动在上面的元素，可用于所有元素，不只是链接。

2.2 为啥hover在手机上没效果？

让我们再回顾一下hover的定义...
:hover用于选择鼠标指针浮动在上面的元素。

再想一想...
手机上哪来的鼠标啊伙计？！
SO,手机端没有hover特效，当你点击的时候就直接触发click。

3.常见问题

手机上没有hover效果时应该怎么办？

4.解决方案

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

然后来看一下解决的方法...

手机虽然没有鼠标，但是咱有触摸事件啊！

一开始触摸事件是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候， PC端的鼠标和键盘事件是不够用的。
在iPhone 3G发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3.touchend事件：当手指从屏幕上离开的时候触发。
4.touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切触发时间，文档中并没有具体说明，咱们只能去猜测了。
（PS:主要的是前三个触摸事件）