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

【问题标题】：Hover stays active, until mouseover another hoverable object悬停保持活动状态，直到鼠标悬停在另一个可悬停对象上
【发布时间】：2013-05-19 09:19:51
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery function hover jquery-animate

【解决方案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

【讨论】：

【解决方案2】：

您想使用mouseenter 事件而不是hover 事件。

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

【讨论】：