Question

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

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

所以这是我的代码，首先是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的区域

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

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

http://jsfiddle.net/fESVm/

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

悬停fadeOut jQuery问题

1 个答案: