jquery - 悬停淡出 jQuery 问题

Question

我有一个带有 3 个图像 slider 的页面。如果将鼠标悬停在 slider 的左侧，则会出现一个显示向左方向的箭头并替换鼠标。如果您将鼠标悬停在 slider 的右侧部分，则会出现一个显示正确方向的箭头并替换鼠标。而且，这些箭头会出现和消失，淡入淡出(这就是我使用 jQuery 而不是 css 光标属性的原因)。

我做了所有这些，但问题是，当鼠标仅从左到右下退出 slider 时，箭头不会消失，直到您将鼠标移动到另一个方向。 p>

这是我的代码，首先是 HTML 部分:

<div id="arrow-prev" class="arrow">
<img id="cursorimg_prev" src="style/arrow-left.png" />
</div>

<div id="arrow-next" class="arrow">
<img id="cursorimg_next" src="style/arrow-right.png" />
</div>

CSS:

.arrow
{
height: 585px;
width: 750px;
position: absolute;
top: 0px;
}

#arrow-prev
{
left: 0px;
cursor: none;
width:50%;
}

#arrow-next
{
right: 0px;
cursor:none;
width:50%;
}

#cursorimg_prev,
#cursorimg_next
{
position: absolute;
display: none;
z-index: 99;
}

还有 jQuery 部分:

$('#arrow-prev').mousemove(function(event) {
            var position = $('.slider_conteneur').position();
            var x = event.pageX - position.left - 0;
            var y = event.pageY - position.top - 0;
            $('#cursorimg_prev').css({ top: y+"px", left: x+"px" });
        });

        $('#arrow-prev').hover(function() {
            $('#cursorimg_prev').stop().fadeIn(100);
        }, function(){
            $('#cursorimg_prev').stop().fadeOut(100);
        });

        $('#arrow-next').mousemove(function(event) {
        var position = $('.slider_conteneur').position();
        var position2 = $('#arrow-next').position();

        var x = event.pageX - position.left - position2.left;
        var y = event.pageY - position.top - position2.top;
        $('#cursorimg_next').css({ top: y+"px", left: x+"px" });
        });

        $('#arrow-next').hover(function() {
            $('#cursorimg_next').stop().fadeIn(100);
        }, function(){
            $('#cursorimg_next').stop().fadeOut(100);
        });

希望有人能帮忙!

Answer 1

我认为您的错误是您正在使用悬停在 .arrow div 上进行查找，这些 div 各占可见区域的一半。并且悬停效果将可见，直到您的鼠标离开 div 区域

我改变了一些东西(主要是CSS来调整容器的大小，这可以通过多种方式完成)并将其上传到jsfiddle(用alt文本替换我没有的图像，但它应该提供相同的服务)目的)，我还删除了 mousemove 事件，因为它们会导致很多错误。

我希望我正确理解你的问题

http://jsfiddle.net/fESVm/

    .arrow
     {
     height: 585px;
     width: 28px;
     position: absolute;
     margin-right:182px;
     top: 0px;
     }