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部分// ...// 最后将这一次触摸的元素置空,避免元素无法解除hovercurEle = null;}
};

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

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

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

sdpro.top

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

html

<div class="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