在悬停时只影响父元素。

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

您需要找到目标元素所属的.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();
});

Answer 2

使用this

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