jquery - jquery ホバー解除

Question

このスクリプトを使用して、段落内のリンクにカーソルを合わせると、段落の背景色が発生します。方法がわからないのは、「ホバーを外す」と元の背景色に戻ることです。

$(function(){
    $(".box a").hover(function(){
    $(this).parent().css('background-color', '#fff200');
    });
});

ありがとう！

Answer 1

以下の関数は次のように機能しますonmouseover。onmouseout

$(function () {
    $(".box a").hover(function () {
        $(this).parent().css('background-color', '#fff200');
    }, function () {
        // change to any color that was previously used.
        $(this).parent().css('background-color', '#fff200');
    });
});

Answer 2

JQuery

$(".box a").hover(function(){
    $(this).parent().css('background-color', '#fff200');
 }, function() {
     $(this).parent().css('background-color', '#ffffff');
 });

フィドルを参照してください。

Answer 3

jQueryのドキュメントにはホバー アウト ハンドラーがあります。元の色に戻したいところです。色を変更するだけなら、CSS を使用してみませんか?

$(function(){
    $(".box a").hover(function(){
        $(this).parent().css('background-color', '#fff200');
    },function(){
        $(this).parent().css('background-color', '#originalhexcolor');
    });
});

Answer 4

これに jQuery を使用する必要がある場合は、次のaddClass()代わりに使用しcss()ます。

$('.box a').hover(function(){
    $(this).closest('.box').addClass('hoveredOver');
}, function(){
    $(this).closest('.box').removeClass('hoveredOver');
});

CSS の場合:

.hoveredOver {
    background-color: #fff;
}

JS フィドルのデモ。

参考文献:

• addClass().
• removeClass().