问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jQuery hover如何悬停时间超过500毫秒才会触发hover事件

头像
xiaojiejie
    1092331
    头像
    边城
      59.8k157274
      <!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>sem测试</title>
        <script src="jquery.min.js"></script>
    </head>

    <body style="background:#f1f1f1">
    
        <div style="width:491px;height:360px; background:#ffffff; overflow:hidden;">
            <p style="padding:20px 20px 0px 20px; font-size:20px; font-weight:bold;">领域解决方案</p>
            <p style="padding:0px 20px 0px 20px; font-size:15px; font-weight:bold;">从商务和财务到销售与服务，金蝶的解决方案盖所有业务线。深入了解面向你所在业务线部门的解决方案组合，连接所有数据，驱动成功。</p>
            <div id="content" style="display:inline-block;position: relative;">
                <div style=" float:left;"><img src="02.jpg"></div>
                
                
                <div style="width:284px; height:234px; background:#18bef2;float:left;">
                    
                        
                <div  style="padding:20px;color: #ffffff;"><span class="xt"><a href="#">.协同管理(OA系统)</a></span>
                                    
<div class="xt01" style="background:url(01.jpg) center no-repeat; width:491px;height:211px;position: absolute; top: 0px;left:-491px; display:none;z-index: 99;">
                                <ul style="list-style:none; color:#FFFFFF; line-height:28px; padding-top:30px;">
                                    <li>.助企业解决ERP集成问题 – ERP一体化解决方案</li>
                                    <li>.流程监控实时掌握 – 实现企业各部门业务的电子流转</li>
                                    <li>.纸质资料电子化，方便共享 -保证信息资料安全，加快资料的传播及共享</li>
                                    <li>.云管理打造无边界工作方式</li>
                                </ul>
                            </div>
                            </div>
                            
                        <div  style="padding:20px;color:#ffffff;"><span class="xt">.产品生命周期管理（PLM系统）</span>
                        <div class="xt01" style="background:url(01.jpg) center no-repeat; width:491px;height:211px;position: absolute; top: 0px;left:-491px; display:none;z-index: 99;">
                                <ul style="list-style:none; color:#FFFFFF; line-height:28px; padding-top:30px;">
                                    <li>.111111助企业解决ERP集成问题 – ERP一体化解决方案</li>
                                    <li>.流程监控实时掌握 – 实现企业各部门业务的电子流转</li>
                                    <li>.纸质资料电子化，方便共享 -保证信息资料安全，加快资料的传播及共享</li>
                                    <li>.云管理打造无边界工作方式</li>
                                </ul>
                            </div></div>
                                    
                        <div  style="padding:20px 20px 10px 20px;color:#ffffff;"><span class="xt">.人力资源管理（S-HR）</span>
                        <div class="xt01" style="background:url(01.jpg) center no-repeat; width:491px;height:211px;position: absolute; top: 0px;left:-491px; display:none;z-index: 99;">
                                <ul style="list-style:none; color:#FFFFFF; line-height:28px; padding-top:30px;">
                                    <li>.高层角色</li>
                                    <li>.人力资源角色</li>
                                    <li>.直线经理人角色</li>
                                    <li>.其他领域解决方案</li>
                                </ul>
                            </div></div>
                    
                                 
                        <div  style="padding:20px 20px 10px 20px;color:#ffffff;"><span class="xt">.人力资源管理（S-HR）</span>
                        <div class="xt01" style="background:url(01.jpg) center no-repeat; width:491px;height:211px;position: absolute; top: 0px;left:-491px; display:none;z-index: 99;">
                                <ul style="list-style:none; color:#FFFFFF; line-height:28px; padding-top:30px;">
                                    <li>.高层角色</li>
                                    <li>.人力资源角色</li>
                                    <li>.直线经理人角色</li>
                                    <li>.其他领域解决方案</li>
                                </ul>
                            </div></div>
                        
                
                </div>

            </div>

        </div>
        
        
    <style>
    .xt a{
        color:#ffffff;
        text-decoration:none;
        }
    .active a{
        text-decoration:underline;
        
        }
    </style>    
        
        
        
        <script>

    jQuery(document).ready(function($) {
        var timer;
$(".xt").on({
"mouseenter":function(){
    clearTimeout(timer);
    timer=setTimeout(function(){
        //这里触发hover事件
    },500);
},
"mouseleave":function(){
    clearTimeout(timer);
}
});
        
        
        $(".xt").each(function(){
            var a_left=$(this).find(".xt01").css("left");
            $(this).bind("mouseenter", function(e) {
                $(this).addClass("active");
                 $(this).parent().find(".xt01").css("left","-493px");
                
                $(this).parent().find(".xt01").show().animate({
                    left:"0"
                })
            });
  
        })
        $(".xt01").each(function(){
            $(this).bind("mouseleave",function(){
                $(this).animate({
                    left:"493"
                })
                
                $(this).parent().find(".xt").removeClass("active");
            })
            
        $("#content").bind("mouseleave",function (){
            $(".xt").removeClass("active");
            
        }) 
        

    })
    })


</script>
    </body>

</html>

      图片描述

      javascript
      阅读 6.2k
      3 个回答
      得票最新
      头像
      边城
        59.8k157274

        你这里不是已经有解决方案了么？还问啥？

        jQuery(document).ready(function($) {
    var timer;
    $(".xt").on({
        "mouseenter": function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                //这里触发hover事件
            }, 500);
        },
        "mouseleave": function() {
            clearTimeout(timer);
        }
    });
});

        看了 @q_tian 的回复，补充一下吧，对于多个 .xt，有几个办法可以让每个 .xt 保持自己的 timer

        方法一，使用 data 

        jQuery(document).ready(function($) {
    // var timer;
    $(".xt").on({
        "mouseenter": function() {
            var timer = $(this).data("timer");
            clearTimeout(timer);
            timer = setTimeout(function() {
                //这里触发hover事件
            }, 500);
            $(this).data("timer", timer);
        },
        "mouseleave": function() {
            var timer = $(this).data("timer");
            clearTimeout(timer);
        }
    });
});

        方法二，使用闭包

        jQuery(document).ready(function($) {
    // var timer;
    function getBinds() {
        var timer;
        return {
            "mouseenter": function() {
                clearTimeout(timer);
                timer = setTimeout(function() {
                    //这里触发hover事件
                }, 500);
            },
            "mouseleave": function() {
                clearTimeout(timer);
            }
        };
    }
    
    $(".xt").each(function() {
        $(this).on(getBinds());
    });
});
        头像
        vincentyeah
          18631925

          或许你可以换个思路解决，比如从动画执行上延迟500毫秒

          头像
          q_tian
            1027

            你的思路是对的，但是你的timer只有一个，被多个class=xt的span共用了，你快速在这些span中移动，应该就会发现问题了。
            为每一个span设置一个唯一的timer
            $(".xt").each(function(i, v){

            var timer;

            // 绑定事件
            });

            给题主安利一下css3的transition,
            类似的需求或许用css3就可以了?

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题