jquery - 同じクラスの要素をすべて選択

Question

ホバー時に、同じクラスを持つページ上のすべての要素を強調表示したいと考えています。

私がこれまでに持っているコード:

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $(this).addClass('hover');
});
$('p.myclass').mouseout(function () {
    $(this).removeClass('hover');
});
});

私の簡単な例: JSFiddle

現在、ホバーしている要素のみが強調表示されます。しかし、同じクラスを持つすべての要素を強調表示したいと思います。これはどのように行われますか？CSS3でやるかJqueryでやるかは特に問いません。

Answer 1

mouseoverはクエリされたコレクションの各要素に個別にイベント ハンドラーをアタッチするため、コールバック内の の値は、thisコレクション全体ではなく、ホバーしている要素です。の代わりにthis、セレクターを使用します。

$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});

または、コレクションをキャッシュして参照することで、効率を少し節約することもできます。

var coll = $('p.myclass');
coll.mouseover(function () {
    coll.addClass('hover');
});

Answer 2

使用する

$(document).ready(function () {
$('p.myclass').mouseover(function () {
    $('p.myclass').addClass('hover');
});
$('p.myclass').mouseout(function () {
    $('p.myclass').removeClass('hover');
});
});