0

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

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

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

2 回答 2

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 示例

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

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

jsFiddle 示例

于 2013-05-23T20:58:46.647 回答
1

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

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

于 2013-05-23T21:02:54.870 回答