大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。
今天给大家分享一下，在手机上没有HOVER效果时应该怎么办？
1.背景介绍
怎么发现hover在手机上没效果？
某一天夜晚，观天象异星突现，猛然一惊，急忙拿出手机检查白日刚修炼到第七层的CSS功法， 想着hover光环效果乃我得意之作，可万万不能有事！手止不住的颤抖着，点击屏幕都十分费劲， 五分钟后，终于运行出了第七层功法--投票页，触上玩家卡牌区域....
该死的！我的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的手势插件（不依赖任何库）。
7.参考文献
参考一：Hover手机端的实现
参考三：HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
参考四：HTML5触摸事件(touchstart、touchmove和touchend)
8.更多讨论
现在用移动设备的越来越多，
怎么让写的页面更好的适应移动设备呢？
鸣谢
感谢大家观看
BY : 万维娜，杨纲
移动端的HOVER效果怎么实现_腾讯视频
ppt链接：https://ptteng.github.io/PPT/PPT/css-07-Hover22.html#/
视频链接：https://v.qq.com/x/page/o0517cpronb.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
网友评论