2

我有一个带有 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);
        });

希望有人能帮忙！

4

1 回答 1

1

我认为您的错误是您正在查看 .arrow div 上的悬停，它们每个占可见区域的一半。并且悬停效果将可见，直到您的鼠标移到 div 的区域

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

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

http://jsfiddle.net/fESVm/

    .arrow
     {
     height: 585px;
     width: 28px;
     position: absolute;
     margin-right:182px;
     top: 0px;
     }
于 2013-03-09T14:26:26.287 回答