jQuery: показывать и скрывать дочерний div при наведении

Question

У меня есть набор предметов. У каждого предмета есть два изображения и немного текста. Для изображений я создал родительский div, у которого есть переполнение: скрытое значение CSS. Я хочу добиться эффекта наведения мыши. Как только вы наведите курсор на изображения, я хочу скрыть текущий div и показать второй div. Вот крошечный фрагмент:

<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>

Я создал небольшой фрагмент jQuery:

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

Теперь проблема не только в том, что скрытый в данный момент ребенок скрыт. Вместо этого все остальные существующие дети также скрыты. Мне нужно что-то вроде «this» или «current», но я не знаю, какая функция jQuery является правильной. Есть идеи?

Спасибо, BJ

Answer 1

Я нашел решение. Спасибо, ребята.

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

Answer 2

Это то, что вы ищете?

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

Answer 3

Это ключевое слово отлично работает:

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