Question

我想通过我网站左侧和右侧的“上一页”和“下一页”箭头控制全屏幕背景图片。

HTML

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

css（scss）

#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（）这个导航......

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

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

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

有关于此的任何想法吗？

Answer 1

试试这个。

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

jQuery MouseMove：内容褪色？

1 个答案: