Question

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

Answer 1

编辑：这不是qeustion的意思 - 只是忽略这个答案。

你可以在没有javascript的情况下实现这一点，使用纯css：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style>
  .blue-tooltip + .tooltip > .tooltip-inner {background-color: blue;}
  .blue-tooltip + .tooltip > .tooltip-arrow { border-bottom-color: blue; }
</style>

<div class="well">
  
    <button type="button" class="btn btn-default blue-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bototm">Blue Tooltip on bottom</button>
  
</div>

<script>
  $(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

Answer 2

你的解决方案是对的。有一件事是在清除超时之前检查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");
}

当鼠标移出时如何隐藏元素

2 个答案: