javascript - 鼠标悬停在div面板上

我一直在研究一个在mousemove上显示并在一定延迟后隐藏的div。我已经实现了上述目的。

我已在下面附加了代码-

var nav = $('.nav');
var movementTimer = null;

var $doc = $(document);


$doc.on('mousemove', function(e) {
  nav.addClass('show');
});

$doc.on('mousemove', function(e) {
  clearTimeout(movementTimer);
  movementTimer = setTimeout(function() {
    nav.removeClass("show");
  }, 500);
})

.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px;
  transition: .4s ease-in-out;
}
.nav.show {
  bottom: 0px;
  transition: .2s ease-in-out;
}

<div class="nav">This is a funny nav</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>

http://jsfiddle.net/wVVbT/129/

根据此代码，div在一定时间后消失。
现在我要问的问题是，当我将鼠标悬停或悬停在div上时如何保持它。
帮助将不胜感激。

最佳答案

只需检查目标元素（在e.target下）是否具有类nav

看看这个小提琴：

var nav = $('.nav');
var movementTimer = null;

var $doc = $(document);


$doc.on('mousemove', function(e) {
nav.addClass('show');
});

$doc.on('mousemove', function(e)
    {
        clearTimeout(movementTimer);
        if(!$(e.target).hasClass("nav")) {
            movementTimer = setTimeout(function()
            {
                nav.removeClass("show");
            }, 500);
        }
    })

body {
  font-family: helvetica neue, helvetica, arial, sans-serif;
  height: 8000px;
}


.nav {
  background: #111;
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  right: 0px;
  bottom: -100px;
  left: 0px;
  transition:.4s ease-in-out;
}

.nav.show{
  bottom:0px;
  transition:.2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">This is a funny nav</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.unevent.js"></script>

如果元素提供了类，则有一个.hasClass（class）函数返回true。因此，只需插入一条if语句（其中check是element）就没有类nav并执行计时器。