悬停保持活动状态，直到鼠标移到另一个悬停对象上

Hover stays active, until mouseover another hoverable object

本文关键字：悬停 另一个 对象 鼠标 活动状态      更新时间：2023-09-26

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

我想让它即使当你的鼠标离开盒子(并且没有触摸到另一个可以悬停的盒子)，它保持活动

这是一个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事件。

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

相关文章：