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

Answer 2

这应该有效

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

Answer 3

你不需要javascript。

.member .member-icon i {
    opacity: 0;
    transition: opacity 1s;
}
.member:hover .member-icon i {
    opacity: 1
}

Answer 4

由于@ j08691已经有了正确的jQuery解决方案，我将只发布一个替代的CSS解决方案：

使用转换自适应和member，悬停使i元素不透明度为1（显示），默认为0（隐藏）

＆＃13;

.member i {
  display: inline-block;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
}

.member:hover i {
  opacity: 1;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

＆＃13;

Answer 5

我认为你正在寻找这个：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a class="member">
    <div class="member-icon">
        <img src="http://www.axpe-blogs.com/wp-content/uploads/stackoverflow_logo.jpg" height="30px">
         <i style="display: none" class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>
<a class="member">
    <div class="member-icon">
        <img src="http://www.axpe-blogs.com/wp-content/uploads/stackoverflow_logo.jpg" height="30px">
        <i style="display: none" class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>
<a class="member">
    <div class="member-icon">
        <img src="http://www.axpe-blogs.com/wp-content/uploads/stackoverflow_logo.jpg" height="30px">
        <i style="display: none" class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>
<a class="member">
    <div class="member-icon">
        <img src="http://www.axpe-blogs.com/wp-content/uploads/stackoverflow_logo.jpg" height="30px">
        <i style="display: none" class="fa fa-search-plus" aria-hidden="true"></i>
    </div>
</a>

只使用jQuery悬停在当前元素上

5 个答案: