javascript - 如何在Jquery中为同一类的不同div中的特定元素添加悬停效果？

Question

当有人将鼠标悬停在同一个 div 中的超链接上时，我正在尝试为图标添加悬停效果，但使用当前代码，该名称的 div 中的所有图标都被悬停了。

例如。当有人将鼠标悬停在第一个 div 的超链接上时，它应该只向 fa-shield 图标添加悬停效果。当前 HTML -

<div class="features">
    <i aria-hidden="true" class="fa fa-shield"></i>
    <h2>Lorem</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a class="no-border" href="#0">Read More &rarr;</a>
</div>

<div class="features">
    <i aria-hidden="true" class="fa fa-heart"></i>
    <h2>Lorem</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    <a class="no-border" href="#0">Read More &rarr;</a>
</div>

当前的 Jquery -

$(".features a.no-border").mouseover(function() {
    $(".features i").css({
        background: '#21c2f8',
        transition: '.5s'
    });
});
$(".features a.no-border").mouseleave(function() {
    $(".features i").css({
        background: '#1a1c28',
        transition: '.5s'
    });
});

Answer 1

从 this 上下文中，在 .siblings() 中搜索图标 i:

$(".features a.no-border").mouseover(function() {
    $(this).siblings("i").css({
        background: '#21c2f8',
        transition: '.5s'
    });
});
$(".features a.no-border").mouseleave(function() {
    $(this).siblings("i").css({
        background: '#1a1c28',
        transition: '.5s'
    });
});