jquery - クラスを持つ最も近いスパンに addClass

Question

要素「goto」のマウスオーバーでクラスを追加し、クラス「矢印」で矢印にクラス「アクティブ」を与えようとしていますが、これはどのように行われますか?

  $('.goto').on('mouseover',function() {
 $('.goto').find('.arrow').addClass('active')  
 })

<span class="goto">Hover here<span class="arrow"><img src="assets/img/arrow.png">    </span></span>
<span class="goto">Hover here<span class="arrow"><img src="assets/img/arrow.png"></span></span>

Answer 1

動作中のjsFiddleデモ

これを使って：

$(function () {
    $('.goto').on('mouseover',function() {
        $(this).find('.arrow').addClass('active');
    });
});

また、取り付けmouseoutて元に戻すこともできます：

$(function () {
    $('.goto')
        .on('mouseover',function() {
            $(this).find('.arrow').addClass('active');
        })
        .on('mouseout',function() {
            $(this).find('.arrow').removeClass('active');
        });
});

---

ヒント

これは CSS のみで行うことができます。この状況では、jQuery を使用する必要はありません。

.goto:hover .arrow {
    /* rules for make it active */
}

• CSS のみのjsFiddle デモを確認できます。

Answer 2

.gotoあなたのコードは、実際にホバーするとすべてを検索します。これを使って ：

$(this).find('.arrow').addClass('active')

thishovered の参照です.goto。

Answer 3

$('.goto .arrow').on('mouseenter', function() {
    $(this).addClass('active');
}).on('mouseleave', function() {
    $(this).removeClass('active');
});