仅当我在 1 秒后将鼠标悬停在 li 上时，才会在悬停时显示弹出窗口

Show popup on hover only if i hover on li after 1 second

本文关键字：悬停 显示 窗口 上时 li 鼠标      更新时间：2023-09-26

我试图在将鼠标悬停在 li 上时显示内部div。我正在做淡入和淡出效果，但问题是当我快速悬停在所有 li 淡入淡出效果上时，适用于所有人。只有当我将鼠标悬停在 li 上 1 秒时，它才应该显示，如果我在一秒之前离开该元素，它不应该显示淡入淡出效果。

<script type="text/javascript">
    $(document).ready(function(){
       var _changeInterval = null;
        $( ".badge_icon" ).hover(function() {
             clearInterval(_changeInterval)
             _changeInterval = setInterval(function() {
                $(this).find(".badges_hover_state").fadeIn(500);
            }, 1000);
        },function() {
             $(this).find('.badges_hover_state').fadeOut(500);
        }); 
      });
</script>

我也尝试使用 stop（）、delay（），但没有成功。最后我尝试使用时间间隔，但现在我的代码已停止工作。

你可以使用这个jquery脚本：

var myTimeout;
$('#div').mouseenter(function() {
    myTimeout = setTimeout(function() {
        //Do stuff
    }, 1000);
}).mouseleave(function() {
    clearTimeout(myTimeout);
});

查看演示

能够通过在

变量名称前面添加窗口来解决此问题。

var myTimeout;
    $('.div').mouseenter(function() {
      window.el = $(this);
        myTimeout = setTimeout(function() {
           el.css("width","200px");
        }, 1000);
    }).mouseleave(function() {
        clearTimeout(myTimeout);
        el.css("width","100px");
    });
相关文章：