Question

I have this code in jquery:

$(".pun").hover(function() {
 $(".guns").show(0);        
});

My html

<div class="pun">
<div class="guns">gun 1</div>
</div>
<div class="pun">
<div class="guns">gun 2</div>
</div>
<div class="pun">
<div class="guns">gun 3</div>
</div>

My css

.pun {
display:visible
}

.guns {
display:none
}

I want to do hover action display only the item that is being hovering. Now if you doing hover show every divs guns.

Answer 1

To show only the guns div that’s inside of the pun div you’re hovering, use the find function

$(".pun").hover(function() {
   $(this).find(".guns").show(0);        
});

Or provide a context for your selector

$(".pun").hover(function() {
   $(".guns", this).show(0);        
});

Also, the default for show performs no animation, so you can replace .show(0); with just show();