0

さて、ページに複数のリンクがあり、それらをロールオーバーしたときにリンクの背景色を変更したいとします。私はこのコードを使用します：

$(function() {
    $('a').mouseover(function() {
        $('a').css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $('a').css('background-color', 'white');
    });
});

このコードの問題は、1つをロールオーバーすると、すべてのリンクの色が変わることです。それぞれに特定のIDを与え、それぞれに特定の機能を作成することはできますが、これを行うためのより効率的な方法はありますか？編集：さらに、元の背景色を元の色に戻すにはどうすればよいですか。背景を白に戻すと、そもそも白ではなかったのかもしれません。どうすればこれを修正できますか？

4

2 に答える 2

4

お使いのバージョンでは、で関数$('a')を呼び出すために使用します。.css()問題は$('a')、マウスを移動したノードだけでなく、ページ上のすべてのノードを選択することです。マウスオーバーコールバック関数内で、thisキーワードはイベントの発信者であったノードを参照します。したがって、$(this)その関数内で実行すると、そのノードのjQueryオブジェクト（ラップされたセットと呼ばれます）が作成されます。これで、関数を除くすべてのjquery関数を呼び出すことができます.css()。だからここに行きます： 

$(function() {
    $('a').mouseover(function() {
        $(this).css('background-color', 'black');
    });
}); 
$(function() {
    $('a').mouseleave(function() {
        $(this).css('background-color', 'white');
    });
});
于 2012-04-16T22:26:24.927 に答える
1

ご存知のように、皆さんはそれについて長く困難な道を進んでいます。

// this is like document.onload = function, 
//  this only needs to be called once, you can put 
//  all your jQuery in this one function
$(function() {
    // the following is a call to all `a` links to add jQuery's own .hover function
    // see -> http://api.jquery.com/hover/
    $("a").hover(function(eIn) { // this first function is the action taken when
                                 // user hovers over the link
        $(this).css({ 'background-color': '#000', 'color': '#fff' });
    }, function(eOut) { // this second function is what happens 
                        // when user hover away from the link
        $(this).css({ 'background-color': '', 'color': '' });
    });
});

WORKINGFiddleを参照してください

また、これにはJQUERYは必要ありません。CSSを使用してください

CSSの場合：

a:hover {
    background-color: #000;
    color: #fff;
}​

ここでのみCSSでそれを参照してください

于 2012-04-16T22:45:42.927 に答える