当鼠标不在时，如何隐藏元素

How to hide element, when mouse is out

本文关键字：隐藏 元素 何隐藏 鼠标      更新时间：2023-09-26

我想在一段时间后隐藏div，如果鼠标没有在它上面。这个脚本正在工作，但我想知道它如何才能更好地工作。

var i = null;
i = setTimeout(function () {
    $("#info").hide("slow");
}, 7000);
$("#info").mousemove(function() {
    clearTimeout(i);
}).mouseleave(function() {
    i = setTimeout(function () {
        $("#info").hide("slow");
    }, 2000);
});

你的解决方案是对的。一件事是在清除超时之前检查i是否不是null。如果您想要更漂亮的代码，请将超时回调定义为单独的函数，如下所示:

var i = null;
i = setTimeout(hideInfo, 7000);
$("#info")
  .mousemove(function() {
     if(i){
        clearTimeout(i);
     }
  })
  .mouseleave(function() {
     i = setTimeout(hideInfo, 2000);
  });
function hideInfo(){
     $("#info").hide("slow");
}

编辑:这不是问题的真正内容-忽略这个答案。

你可以不使用javascript，使用纯css:

yourDivClass {
    opacity: 0;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}
yourDivClass:hover {
    opacity: 1;
    transition: 0s ease all;
}
相关文章：