javascript - 仅使用 jQuery 对当前元素进行悬停

Question

我对 JS 有点陌生。当我悬停时，它会影响所有项目，我可以看到原因，但不确定如何定位当前悬停的项目。

有什么想法吗？

$('.member').hover(function() {
    var $this = $(this);
      $('.member-icon i').fadeIn('slow');
    },
    function(){
      $('.member-icon i').fadeOut('slow');
    }
 );

HTML

<a class="member">
    <div class="member-icon">
        <img src="image.jpg">
        <i class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>
<a class="member">
    <div class="member-icon">
        <img src="image.jpg">
        <i class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>
<a class="member">
    <div class="member-icon">
        <img src="image.jpg">
        <i class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>
<a class="member">
    <div class="member-icon">
        <img src="image.jpg">
        <i class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>

Answer 1

您需要使用 $(this) (您似乎已经开始使用它)来引用特定元素，而不是选择多个元素的类。

$('.member').hover(function() {
        $(this).find('.member-icon i').fadeIn('slow');
    },
    function(){
        $(this).find('.member-icon i').fadeOut('slow');
    }
);

<强> bootply example