jquery 控制鼠标移出div定时消失

最新推荐文章于 2021-12-08 10:05:04 发布

xmaaaa

最新推荐文章于 2021-12-08 10:05:04 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40364421/article/details/83622402

这篇博客分享了如何使用jQuery实现一个功能：当鼠标移到table行上显示div详情，鼠标移入div详情页则详情页保持显示，鼠标移出div或table一秒钟后详情页自动消失。主要涉及mouseover、mouseenter、mouseout和mouseleave四个方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在开发中，想做一个类似QQ详情页面的东西，实现：

鼠标移到table某条内容上，出现一个div详情展示页
若鼠标移入div，则div不消失
鼠标移出div或table，一秒后消失

在进行仔细研究和尝试后，实现了该功能

先了解下主要用到的方法：

1、mouseover与mouseenter

  mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
  mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

2、mouseout与mouseleave

 mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
 mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

下面贴出代码

        var flagHideparas = false;
        //鼠标移入table
        $('#carBox tr').mouseover(function (){
            $('#detail').show();
            //这边可以补充内容信息
            flagHideparas = false;
        });
        //鼠标移入详情页
        $("#detail").mouseover(function(){
            flagHideparas = false;
        });
        // 鼠标移出table
        $('#carBox').mouseleave(function (){
            hide();
        });
       //鼠标移出详情页
        $("#detail").mouseleave(function(){
            hide();
        });
        
        //定时隐藏
        function hide() {
            flagHideparas = true;
            setTimeout(function(){
                if(flagHideparas){
                    $('#detail').hide();
                };
            },1000);
        }