CODEWITHSUNDEEP
javascriptjquery
James
James

Reputation: 1706

Only doing hover for that current element with jQuery

I am a little new to JS. When I hover it effects all the items which I can see why but not sure how to target just the current one that is hovered.

Any ideas?

$('.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>

Upvotes: 0

Views: 52

Answers (5)

SilverSurfer
SilverSurfer

Reputation: 4368

I think you are looking for this: 

$('.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>

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

Since @j08691 already have the correct jQuery solution, I will just post an alternative CSS only solution:

use transition ease-in-out and on member, hover make the i element opacity to 1 (show), default 0(hide)

.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;
}
<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>

Upvotes: 0

Daniel Beck
Daniel Beck

Reputation: 21475

You don't need javascript for this.

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

Upvotes: 0

j08691
j08691

Reputation: 207901

You need to use $(this) (which you seem to have started to use) to refer to the specific element rather than a class which will select multiple elements.

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

bootply example

Upvotes: 3

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

This should work

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

Upvotes: 0

Related Questions