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

الآن المشكلة ليست فقط أن الطفل الذي يحوم حاليًا مخفية. بدلاً من ذلك ، يتم إخفاء جميع الأطفال الحاليين أيضًا. أحتاج إلى شيء مثل "هذا" أو "الحالي" ولكني لا أعرف أي وظيفة 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();