Как добавить эффект зависания к определенным элементам в разных div одного класса в JQuery?

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

Вы должны использовать "это" вместе методы обхода дерева, которые можно найти здесь (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» в качестве братьев и сестер, вы могли бы использовать более специфичный селектор css, как вы бы знали (например, i.fa-shield).

Answer 2

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