Functional Overview

The hover of CSS is triggered when touched, the mouse touches on the computer side, and the finger touches on the mobile side

Sometimes css alone cannot achieve some effects, such as elements triggering hover and other elements triggering animation effects, so you need to use js

Implementation

JS wants to simulate the hover effect of css, you can use the mouse's entry and exit events

There are two types of such events, one is only effective for the current element, and the other is also effective for the current and current element sub-elements

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

// over是进入触发,out是移出触发,对子元素也生效
div.onmouseover = function () {
    
    };
div.onmouseout = function () {
    
    };

The above method can use js to simulate the hover effect of css on the computer side, but there is still a little problem on the mobile side

The css hover effect on the mobile terminal can be triggered by a short touch of the finger, and the above method needs to be long-pressed to be triggered

So you can use the touch function (only on the mobile side)

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

The above two methods still cannot achieve the same effect as hover on the mobile terminal. The hover is triggered after being pressed on the mobile terminal, and then lifted will not cancel the hover. Only clicking on other elements will cancel the current hover

So you can only use touchstart to release after any element is pressed

The event of the current element will be executed first, and then other events will be executed, so the priority should be considered

code show as below

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

Finally, integrate the two parts of the code, and you can use js to realize the hover effect of css on the computer side and the mobile side

There is still a small problem. For example, it takes about 1 second to trigger the hover on the mobile terminal. The above method is to trigger it directly. If you have requirements, you can refer to it and handle it yourself.

Finally, hang the effect I achieved, the hover will hide the element and display another element, and vice versa

insert image description here

sdpro.top

The complete code of the example part, using JQ to facilitate the selection of elements

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>

$(".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

JS realizes the hover effect of css, compatible with mobile terminals

Functional Overview

Implementation

Guess you like