jQuery: Show and hide child div when hovering

Question

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 a overflow:hidden CSS value. I want to achieve a 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 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'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 not only the currently hovered child is hidden. Instead, all other existing children 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

Lemkul

Answer 1

I've found the solution. Thank you guys.

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

Lemkul

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

Arturo

Thank you both for your answer. @Sarfraz: Your solution is nice but the images are flickering. We have to work on the parent div .product-images. Any idea? – Birdt

@Björn: You can put your images in a div and give that div a specific width and height. – Arturo

@Safraz: I did what you are suggesting. But it's still not working. If you wan't have a look at heimatkiosk.com/jena/fashion - see the first two images... – Birdt

Answer 3

This keyword works fine:

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

Measurement