JQuery: Show and hide child div when hovering

Question

I have a set of elements. Each element has two images and some text. For images, I created a parent div that has an overflow value: a hidden CSS value. I want to achieve the effect of a mouse. As soon as you hover over the images, I want to hide the current div and show the second div. Here is a tiny snippet:

<div class="product-images"> <div class="product-image-1"><img src="image1.gif>" /></div> <div class="product-image-2"><img src="images2.gif" /></div> </div> 

I created a small jQuery snippet:

 jQuery(document).ready(function() { jQuery('.product-images').mouseover(function() { jQuery('.product-image-1').hide(); }).mouseout(function() { jQuery('.product-image-1').show(); }); }); 

Now the problem is not only that the current hanging child is hidden. Instead, all other existing children are also hidden. I need something like "this" or "current", but I don't know which jQuery function is correct. Any idea?

Thanks BJ

Answer 1

I have found a solution. Thanks guys.

 jQuery(document).ready(function() { jQuery('.product-images').hover(function() { jQuery(this).find('img:first').hide() }, function() { jQuery(this).find('img:first').show(); }); }); 

Answer 2

Is this what you are looking for?

 jQuery(document).ready(function() { jQuery('.product-images img').mouseover(function() { jQuery(this).parent().hide(); }).mouseout(function() { jQuery(this).parent().show(); }); }); 

Answer 3

This keyword works great:

 $(this).hide(); $(this).show();