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

У меня есть набор вещей. У каждого элемента есть два изображения и некоторый текст. Для изображений я создал родительский div, который имеет значение CSS overflow: hidden. Я хочу добиться эффекта наведения курсора мыши. Как только вы наводите курсор на изображения, я хочу скрыть текущий 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


jquery hover mouseover mouseout
person Björn von TRITUM    schedule 15.04.2010    source источник

Ответы (3)


arrow_upward
8
arrow_downward

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

jQuery(document).ready(function() {
    jQuery('.product-images').hover(function() {
        jQuery(this).find('img:first').hide()
    }, function() {
        jQuery(this).find('img:first').show();
    });
});
person Björn von TRITUM    schedule 15.04.2010

arrow_upward
1
arrow_downward

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

jQuery(document).ready(function() {
    jQuery('.product-images img').mouseover(function() {
        jQuery(this).parent().hide();
    }).mouseout(function() {
        jQuery(this).parent().show();
    });
});
person Sarfraz    schedule 15.04.2010
comment
Спасибо вам обоим за ваш ответ. @Sarfraz: Ваше решение хорошее, но изображения мерцают. Мы должны работать с родительским div .product-images. Любая идея? - person Björn von TRITUM; 15.04.2010
comment
@ Björn: Вы можете поместить свои изображения в div и присвоить этому div определенную ширину и высоту. - person Sarfraz; 15.04.2010
comment
@Safraz: Я сделал то, что вы предлагаете. Но все равно не работает. Если вы не хотите смотреть на heimatkiosk.com/jena/fashion, просмотрите первые два изображения. ... - person Björn von TRITUM; 15.04.2010

arrow_upward
-1
arrow_downward

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

$(this).hide();
$(this).show();
person Peeter    schedule 15.04.2010