JS实现css的hover效果，兼容移动端

Hi I’m Shendi

JS实现css的hover效果，兼容移动端

功能概述

CSS的hover即触碰时触发，在电脑端鼠标触碰，移动端手指触摸

有的时候光靠css实现不了一些效果，例如元素触发hover，其他元素触发动画效果，所以需要使用到js

实现方法

JS想模拟css的hover效果，可以使用鼠标的进入移出事件

此类事件有两种，一种为只对当前元素生效，一种对当前及当元素子元素也生效

var div = document.getELementById("div");// enter是进入触发,leave移出触发,对子元素不生效,模拟hover使用这种
div.onmouseenter=function(){};
div.onmouseleave=function(){};// over是进入触发,out是移出触发,对子元素也生效
div.onmouseover=function(){};
div.onmouseout=function(){};

以上方法就可以在电脑端用js模拟css的hover效果了，但在移动端还是有点小问题

移动端的css hover效果是手指短暂触碰即可触发，上面的方法需要长按才能触发

于是可以使用 touch 函数（移动端才有）

var div = document.getELementById("div");// start按下触发,end抬起触发
div.ontouchstart=function(){};
div.ontouchend=function(){};

上面这两种方法还是不能和移动端hover达到一样的效果，移动端是按下后触发hover，然后抬起不会解除hover，只有点击其他元素才会解除当前hover

于是可以只使用 touchstart，在任意元素按下后解除

当前元素的事件会先执行，然后再执行其他事件，所以要考虑先后问题

代码如下

var div = document.getELementById("div");// 当前触发的元素,用于解决先后执行的问题var curEle;
div.ontouchstart=function(){
    curEle =this;};// 任意元素按下解除hover
document.ontouchstart=function(){// 这里是解除hover部分// ...if(curEle){// 这里是显示触摸的hover部分// ...// 最后将这一次触摸的元素置空,避免元素无法解除hover
        curEle =null;}};

最后整合两部分代码，就可以在电脑端，移动端使用js实现css的hover效果了

还有一点小问题，比如移动端按下大概需要1秒才会触发hover，上面的方法是直接触发，有要求可以参考自行处理

最后挂上我实现的效果，hover就隐藏元素显示另一元素，反之则显示回来

sdpro.top

示例部分完整代码，使用JQ方便选择元素

html

<divclass="menu"><a><div><span>菜单1</span></div><p>内容1</p></a><a><div><span>菜单2</span></div><p>内容2</p></a></div>

js

$(".menu > a").mouseenter(function(){$($(this).children("div")).slideUp();$($(this).children("p")).slideDown();});$(".menu > a").mouseleave(function(){$($(this).children("div")).slideDown();$($(this).children("p")).slideUp();});var curEle;
document.ontouchstart=function(){$(".menu > a > div").slideDown();$(".menu > a > p").slideUp();if(curEle){$($(curEle).children("div")).slideUp();$($(curEle).children("p")).slideDown();
        curEle =null;}};$(".menu > a").each(function(){this.ontouchstart=function(){
        curEle =this;};});

END