jQuery: Show and hide child div when hovering
- by Björn
Hi there,
I've got a set of items. Each item has two images and some text. For the images I've created a parent div which has an overflow:hidden CSS value. I want to achieve an mouseover effect. As soon as you hover over the images I want to hide the current div and show the second div. Here's a small 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've 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 that not only the currently hovered child is hidden. Instead all other existing childs are hidden as well. I need something like "this" or "current" but I don't know which jQuery function is the right one. Any idea?
Thanks, BJ
