javascript - 悬停保持事件状态，直到鼠标悬停在另一个可悬停对象上

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

尝试删除悬停的第二个函数调用:

$('.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