Javascript 鼠标不在时如何隐藏元素

我想在一段时间后隐藏一个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);
});

---

编辑：这不完全是qeustion的目的-忽略这个答案

使用纯css，无需javascript即可实现这一点：

yourDivClass {
    opacity: 0;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

yourDivClass:hover {
    opacity: 1;
    transition: 0s ease all;
}

---

你的解决方案是正确的。一件事是在清除超时之前检查

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");
}

---

@我会看一看的。我想躲藏一会儿，但如果鼠标在上面就不会了。当鼠标不在时，用一些延迟隐藏元素，但随后元素被隐藏default@A.Wolff难道不是吗？可能我没有正确理解答案。默认情况下不应该隐藏元素，但它应该延迟隐藏。除了鼠标在上面。当鼠标离开时，它也应该隐藏一些延迟。你能澄清一下你说的更好工作是什么意思吗？您是否缺少一些功能？或者你只是想要一个更干净的代码？只是想要一个更干净的代码，我认为在我看来，超时没有被正确地清除检查if

I

is null是无用的，因为它只会在执行第一行和第二行之间为null。清除超时不会更改

i

的值。或者我弄错了？您可以将第一行和第二行合并到

var I=setTimeout（hideInfo，7000）

将

.mousemove

更改为

.mouseenter

可能是个好主意。