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

Working jsFiddle Demo

使用此：

$(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');
        });
});

TIP

你只能用CSS做这个，在这种情况下，不需要使用jQuery：

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

您只能查看jsFiddle demo的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');
});

addClass与类的最近跨度

3 个答案:

TIP