Question

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

我应该在悬停状态下添加clearTimeout在哪里？我是不是该？ Sory我是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

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

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

Answer 2

我添加了一个hover变量来存储它是否超过导航，它可能不是最好的方式，但它可以工作

http://jsfiddle.net/h3wDt/5/

Jquery防止在悬停时隐藏元素。 hover上的clearTimeout，mousemove上的setTimeout

2 个答案: