1

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

我应该在哪里添加 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/

4

2 回答 2

2

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

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小提琴

于 2013-03-05T03:33:55.493 回答
1

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

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

于 2013-03-05T03:27:39.923 回答