0

我有全屏背景图像，我想通过网站左右两侧的“上一个”和“下一个”箭头进行控制。

html

<nav id="pagination">
    <a id="prev" href="#"></a>
    <a id="next" href="#"></a>
</nav>

css (css)

#pagination {   
    display:none;
    position:relative;
    z-index:1;

    a { 
        display:block;
        position:fixed;
        top:45%;
        width:100px;
        height:100px;

        &#next {
            right:20px;
        }

        &#prev {
            left:20px;
        }
    }
}

所以这正是我想要的。我有一个在页面左侧垂直居中的上一个图像链接和一个在页面右侧垂直居中的下一个图像链接。

我有以下 JS (jquery) 到fadeIn() 和fadeOut() 这个导航…</p> 

var c, p = $('#pagination');
$(document).on('mousemove',function() {
        p.fadeIn('fast');
        clearTimeout(c);
        c = setTimeout(function() {
            p.fadeOut('fast');
        }, 1000);
    });

这工作得很好，但是#pagination当我目前在分页链接上时也会淡出（）。是否可以从这种行为中排除链接本身？我希望我的解释不会太奇怪。再说一遍：现在我的分页就像著名的视频播放器一样工作。不移动鼠标时，分页淡出 - 移动鼠标时，分页再次淡入。

但是，当我当前位于两个链接（#prev或#next）之一并且不移动鼠标时，“#pagination”也会淡出。我不希望这种情况发生。因此，当鼠标悬停在两个分页链接上时，分页不应淡出。

有什么想法吗？

4

1 回答 1

0

尝试这个。

 var c;
 $('#pagination').('mousemove',function() {
    $(this).fadeIn('fast');
    clearTimeout(c);
    c = setTimeout(function() {
        p.fadeOut('fast');
    }, 1000);
});
于 2012-08-08T07:21:09.047 回答