0

3 つのボックスがあるとします。それぞれにカーソルを合わせると、背景色が赤に変わります。

マウスがボックスから離れても（ホバー可能な別のボックスに触れていなくても）、マウスがアクティブなままになるようにしたいと思います。

ここに 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 の 2 番目の関数呼び出しを削除してみてください。

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

jsFiddle の例

またはホバーを使用せずに（とにかく2番目の部分を使用していないため）：

$('.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 に答える