onmouseenter与onmouseleave事件

最新推荐文章于 2024-11-30 16:52:41 发布

原创最新推荐文章于 2024-11-30 16:52:41 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #onmouseenter #onmouseleave

js 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了onmouseenter和onmouseleave两个鼠标事件的使用方法，通过实例展示了如何利用这两个事件实现元素的显示和隐藏，如展示二维码等功能。文章包含具体的HTML和JavaScript代码示例。

onmouseenter 事件在鼠标指针移动到元素上时触发。

onmouseenter 事件在鼠标指针离开元素上时触发。

常用于显示二维码等功能

应用：

<button class="u-btn-sq" onmouseenter="j_OutBox_on('j-bubOpenBox')" onmouseleave="j_close_off('j-bubOpenBox')" type="button">
    <img class="u-ico" src="../../static/portal/images/style/icon_qu.png"/>
</button>

//移动到元素
function j_OutBox_on(im) {
        var obj = "." + im;
        if ($(obj).is(":hidden")) {
            $(obj).show();
        } else {
            $(obj).hide();
        }
    }
//远离
 function j_close_off (it) {
    var obj = "." + it;
    $(obj).hide();
    
    }