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;};// 任意元素按下解除hoverdocument.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
