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 */
}

• 您只能查看jsFiddle 演示的 CSS。

Answer 2

当您将鼠标悬停时，您的代码实际上是在搜索每.goto一个。用这个 ：

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

this是悬停的参考.goto。

Answer 3

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