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

Answer 2

您必须使用“this”和树遍历技术（可以在此处找到https://api.jquery.com/category/traversing/tree-traversal/），以指定您仅指代事件中涉及的特定图标，如下所示：

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

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

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

2 个答案: