Jqueryの同じクラスの異なるdivの特定の要素にホバー効果を追加するにはどうすればいいですか？

Question

誰かが同じ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> 

現在の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」を渡す必要があります。もちろん、兄弟として複数の「i」要素があった場合は、わかっているように、より具体的なCSSセレクタ（i.fa-shieldなど）を使用できます。

Answer 2

thisコンテキスト、アイコンiため.siblings()での検索から：

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