jQuery: Показать и скрыть ребенка Div, когда завис
Вопрос
У меня есть набор предметов. У каждого элемента есть два изображения и некоторые текст. Для изображений, которые я создал родительский 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();
});
});
Сейчас проблема в том, что в настоящее время завитой ребенок скрыт. Вместо этого все остальные существующие дети также скрыты. Мне нужно что-то вроде «это» или «текущий», но я не знаю, какая функция jQuery имеет правильную. Есть идеи?
Спасибо, БЖ
Решение
Я нашел решение. Спасибо вам, ребята.
jQuery(document).ready(function() {
jQuery('.product-images').hover(function() {
jQuery(this).find('img:first').hide()
}, function() {
jQuery(this).find('img:first').show();
});
});
Другие советы
Это то, что вы ищите?
jQuery(document).ready(function() {
jQuery('.product-images img').mouseover(function() {
jQuery(this).parent().hide();
}).mouseout(function() {
jQuery(this).parent().show();
});
});
Это ключевое слово работает нормально:
$(this).hide();
$(this).show();