ashish ashish - 7 months ago 11
HTML Question

using $(this) properly in jquery

$(".gear_listing").hover(function(){

$(".overlay_gears").show();
},function(){
$(".overlay_gears").hide();
}
);


above is my jquery code,as u can imagine i am trying to show .overlay_gears div when .gear_listing div is hover,the above code works just fine.the problem is i have many number of .gear_listing divs and many number of .overlay_gears div,when i hover on any div called .gear_listing all the .overlay_gears div is shown which i dont want.i just want to show the .overlay_gears div under that .gear_listing div.i know i have to make use of $(this).i just don't know how.

i tried doing this:

$(".gear_listing").hover(function(){
var this=$(this);
this.$(".overlay_gears").show();
},function(){
this.$(".overlay_gears").hide();
}
);


its not working

below is my div structure:

<li>
<a href="#">
<div class="gear_listing relative">

<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>

<img src="images/list_one.jpg">
</div>
</a>
</li>

<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_two.jpg">
</div>
</a>
</li>

<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_three.jpg">
</div>
</a>
</li>

Answer

.overlay_gears is children of .gear_listing so use like this

$(".gear_listing").hover(function(){
    $(this).children(".overlay_gears").fadeIn();
},function(){
    $(this).children(".overlay_gears").fadeOut();
});