Question

我有多个包含相同元素的div，我希望效果只发生在悬停发生的div中。

我有这个HTML：

<div class="item mit">
                    <div class="link"></div>

                    <div class="hidden">
                        <h2>mitagessen</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum est nec elit ornare molestie.</p>
                        <img src="img/food-pic.jpg">
                    </div> <!-- end .hidden -->

                    <div class="image"><img src="img/food-pic.jpg"></div>
                    <div class="image-text">
                        <p>Tagesmenü</p>
                        <h2>mittagessen</h2>
                    </div>
                </div>

以下jquery有效，但它隐藏了.image和.image-text的所有实例，而不仅仅是div中正在徘徊的实例。

$('div.link').mouseenter(function() {
            // $(this).hide();
            $('div.image').hide();
            $('div.image-text').hide();
            $('.hidden').show();
        });

        $('div.hidden').mouseleave(function() {
            // $('div.link').show();
            $('div.image').show();
            $('div.image-text').show();
            $('.hidden').hide();
        });

Answer 1

使用this

 // hide .image which is inside current .item
 $('div.image',$(this).closest('.item')).hide();

Answer 2

您需要找到目标元素所属的.item元素，然后定位其中的元素。

$('div.link').mouseenter(function () {
    // $(this).hide();
    var $item = $(this).closest('.item');
    $item.find('div.image').hide();
    $item.find('div.image-text').hide();
    $item.find('.hidden').show();
});

$('div.hidden').mouseleave(function () {
    // $('div.link').show();
    var $item = $(this).closest('.item');
    $item.find('div.image').show();
    $item.find('div.image-text').show();
    $item.find('.hidden').hide();
});

在悬停时仅影响父级内的元素

2 个答案: