1.背景介绍

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

2.知识剖析

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事件：touchcancel，是在拖动中断时候触发。

（PS:主要的是前三个触摸事件）

5.编码实战

document.addEventListener('touchstart', touch,false);

这行代码的意思是，添加一个一个触摸事件，

varevent = event || window.event;

声明event=event或window.event,因为window.event只在IE下是这样的。他并不是标准,其他浏览器并不支持.x写在这里是为了兼容ie浏览器。

.getElementById("inp");

返回id为“imp”的第一个元素。

上面是触摸后的手机端页面，下面的数字是他的x和y的坐标。touch事件的一个特点就是可以返回touch的位置信息，且touch可以在一个触摸事件发生的同时进行另一次或多次触摸（这一点是touch相对hover的优点），

上面这个例子太过简单，只介绍了touch事件在触摸时的几种事件，但是不能更好的演示touch事件是怎么具体应用手机端，达到可以替代hover效果的。我自己又做了一点补充。

在我们任务七的基础上，为了演示方便，我们注销掉他原本的hover事件代码

为了演示方便，我们注销掉他原本的hover事件代码

/*.main-content-part-role:hover .main-content-part-icon {*/

/*opacity: 1;*/

/*}*/

因为浏览器的问题，我们接下来使用jquery，给.main-content-part-icon（四个小图标的父元素）添加这个命令

($(".main-content-part-icon"));

$(".main-content-part-icon").css("opacity","1");

break;

这样可以在手机端实现了类似于hover的效果。

6.扩展思考

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

可以利用插件来实现，比如，jQuery里有手势的插件， 移动端的zepto库也有手势插件，还有QuoJS的手势插件