Jquery 防止悬停时隐藏元素。悬停时清除超时，鼠标移动时设置超时

Question

我正在尝试实现侧边栏，当鼠标光标停止移动时，两个导航按钮会延迟隐藏。当鼠标光标再次移动时，应该会出现元素。代码工作正常，但是...... 如何防止三个元素在悬停状态时隐藏。

我应该在哪里添加悬停状态的clearTimeout？我是不是该？抱歉，我是 jQuery 的初学者。

这是我的代码:

html:

<div class="container">
<nav>
    <ul>
        <li><a href="#">something</a></li>
    </ul>
</nav>
<div class="prev">prev</div>
<div class="next">next</div>
</div>

CSS

.container { position: absolute; left: 20px; top: 2px; right:2px; bottom: 20px; border: 1px solid red; }
nav { position: absolute; left: 0; top:0; bottom: 0; border: 1px solid blue; }
.prev { position: absolute; width: 50px; height: 30px; bottom: 0; left: 45%; border: 1px solid green; }
.next { position: absolute; width: 50px; height: 30px; top: 0; left: 45%; border: 1px solid green; }

JS

var timeout = false;
var count = $(function() {
$('.container').mousemove(function(e) {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        console.log('hide slideshow elements');
        $('.container nav').fadeOut();
        $('.prev').fadeOut();
        $('.next').fadeOut();
    }, 2500);            
});
});

$(".container").mousemove(function() {
console.log('show slideshow elements');
$('.container nav').fadeIn();
$('.prev').fadeIn();
$('.next').fadeIn();
});

还有 JSfiddle

http://jsfiddle.net/h3wDt/3/

Answer 1

我检查了事件目标标记名以查看它是否是 anchor 标记。似乎也有效。

var timeout = false;
var count = $(function() {
    $('.container').mousemove(function(e) {
        $('.container nav').fadeIn();
        $('.prev').fadeIn();
        $('.next').fadeIn();
        clearTimeout(timeout);
        if (e.target.tagName != "A") {
            timeout = setTimeout(function() {
                console.log('hide slideshow elements');
                $('.container nav').fadeOut();
                $('.prev').fadeOut();
                $('.next').fadeOut();
            }, 2500);            
        }
    });
});

JS Fiddle