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

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

例如，当有人将鼠标悬停在第一个div的超链接上时，它只会在fa盾牌图标上添加悬停效果。 当前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>

---

从

此

上下文中，在

.sides（）

中搜索图标

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

您必须使用“this”和树遍历技术（可在此处找到（）），以指定您仅引用事件中涉及的特定图标，如下所示：

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

---

当使用.sides时，您必须传递“i”作为参数，因为锚点有几个同级，并且您需要准确地指定所引用的同级。当然，如果您有多个“i”元素作为兄弟元素，那么您可以使用您知道的更具体的css选择器（例如i.fa-shield）。

这个问题可以通过纯css解决CSS@Banzay怎么用？也希望看到css解决方案。@Banzay您需要调整HTML，因为无法使用css Gotcha选择前面的同级。感谢分享以上链接。

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