Question

我正在尝试将图像放在我的网站上，当您将鼠标悬停在其上时，图像会向下滑动并显示其背后的文字。

我有这个工作，但如果我在图像上稍微移动鼠标它会再次移动。

这是jQuery代码：

$(document).ready(function(){
$('.show').hover(function(){
    $(this).animate({top:'400px'});
},function(){
    $(this).animate({top:'0px'});
    });
});

这是css：

.hover {
width: 300px;
height: 400px;
background: black;
margin-top: 10px;
overflow: hidden;
position: relative;
 }

.show {
width: 300px;
height: 400px;
background: red;
position: absolute;
 }

有没有办法让它停留在悬停状态，直到鼠标完全离开div？

这是JSFiddle的请求JSFIDDLE

Answer 1

尝试添加.stop(true,true)：

$('.show').hover(function() {
    $(this).stop(true,true).animate({
        top: '400px'
    });
}, function() {
    $(this).stop(true,true).animate({
        top: '0px'
    });
});

Answer 2

问题在于您正在移动图像，因此存在mouseout事件，这会导致调用悬停关闭功能。您要做的是使用单独的mouseover / mouseout事件，如下所示：

$('.show').mouseover( function() {
    $(this).animate( {top: '300px'} );
});

$('.hover').mouseout( function() {
    $('.show').animate( {top: '0px'} );
});

请在此处查看我的解决方案：http://jsfiddle.net/zRn5w/

此解决方案的唯一问题是，如果您将鼠标向下移动到图像，它会暂时向上滑动，因为mouseout事件会在.hover上调用。这将是一个稍微棘手的问题...我可能会在移动图像的同时扩展.hover的高度，以使mouseout区域正确。

移动鼠标时，jQuery Hover Slider再次启动

2 个答案: