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

Posted 2023-03-09 HackShendi

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

<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