Question

假设我有三个盒子。其中每一个都可以悬停，当它们的背景颜色变为红色时。

即使你的鼠标离开盒子（并且没有碰到另一个可以移动的盒子），我也想这样做，它会保持活跃状态。

这是一个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);
    });
});

Answer 1

尝试删除hover的第二个函数调用：

$('.box').eq(1).animate({
    backgroundColor: "red"
}, 800);
$('.box').hover(function () {
    $('.box').stop().animate({
        backgroundColor: "green"
    }, 800);
    $(this).stop().animate({
        backgroundColor: "red"
    }, 800);
})

<强> jsFiddle example

或者不使用悬停（因为你还没有使用第二部分）：

$('.box').eq(1).animate({
    backgroundColor: "red"
}, 800);
$('.box').mouseenter(function(){
    $('.box').stop().animate({
        backgroundColor: "green"
    }, 800);
    $(this).stop().animate({
        backgroundColor: "red"
    }, 800);
});

<强> jsFiddle example

Answer 2

您希望使用mouseenter事件而不是hover事件。

http://jsfiddle.net/LvtWB/18/

悬停保持活动状态，直到鼠标悬停在另一个可恢复的对象上

2 个答案: