假设我有三个方框。每一个都可以悬停,当悬停时,它们的背景颜色将变为红色。
我想让它即使当你的鼠标离开盒子(并且没有触摸到另一个可以悬停的盒子),它保持活动
这是一个JSFiddle: http://jsfiddle.net/LvtWB/2/
我希望能够悬停在其中一个,把它变成红色,当鼠标进入空白区域时,背景变化保持活跃。当鼠标进入另一个方框时,它才能回到正常状态。
我怎样才能做到这一点?
jQuery:$(document).ready(function(){
$('.box').eq(1).animate({
backgroundColor: "red"
}, 800);
$('.box').hover(function(){
$('.box').stop().animate({
backgroundColor: "green"
}, 800);
$(this).stop().animate({
backgroundColor: "red"
}, 800);
},
function(){
$(this).stop().animate({
backgroundColor: "green"
}, 800);
});
});
尝试删除hover的第二个函数调用:
$('.box').eq(1).animate({
backgroundColor: "red"
}, 800);
$('.box').hover(function () {
$('.box').stop().animate({
backgroundColor: "green"
}, 800);
$(this).stop().animate({
backgroundColor: "red"
}, 800);
})
<<p> jsFiddle例子/strong> 或者不使用悬停(因为你不使用第二部分):
$('.box').eq(1).animate({
backgroundColor: "red"
}, 800);
$('.box').mouseenter(function(){
$('.box').stop().animate({
backgroundColor: "green"
}, 800);
$(this).stop().animate({
backgroundColor: "red"
}, 800);
});
<<p> jsFiddle例子/strong> 您想使用mouseenter
事件而不是hover
事件。