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

1.背景介绍

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

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

该死的！我的hover呢？？？

2.知识剖析

2.1 hover是什么？

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

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

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

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

再想一想...

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

手机端没有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事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切触发时间，文档中并没有具体说明，咱们只能去猜测了。（主要的是前三个触摸事件）

5.编码实战

Demo1：手机上的hover效果

https://ptteng.github.io/PPT/demo/css-07-Hover/demo1/task7-2.html

Demo2：设置触摸事件之后的效果

https://ptteng.github.io/PPT/demo/css-07-Hover/demo2/demo.html

（具体演示见视频）

6.扩展思考

手机上除了触摸事件，还有触摸手势，怎么用呢？

可以利用插件来实现，比如，jQuery里有手势的插件，移动端的zepto库也有手势插件，还有QuoJS的手势插件（不依赖任何库）。

7.参考文献

Hover手机端的实现：

http://blog.csdn.net/candy_home/article/details/45219765

touchstart和touchend事件：

http://www.cnblogs.com/qiheng/p/3764837.html

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)：

http://www.2cto.com/kf/201402/276737.html

HTML5触摸事件(touchstart、touchmove和touchend)：

http://blog.csdn.net/fuqinyijiu/article/details/41315123

8.更多讨论

现在用移动设备的越来越多，怎么让写的页面更好的适应移动设备呢？

PPT链接：

https://ptteng.github.io/PPT/PPT/css-07-Hover.html#/

视频链接：

https://v.qq.com/x/page/f0385mwe0i4.html