влияет только на элементы внутри родителя при зависании

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