Mousenter только для отдельного div

Question

У меня есть 3 divs с тем же классом, что означает, что при наведении курсора на один он активирует их все. Я посмотрел, и он сказал, что если вы используете $ (this) .find(), это исправит эту проблему. Однако мой код не работает, когда я делаю это, и я задавался вопросом, может ли кто-нибудь сказать мне, что я делаю неправильно? И как сделать так, чтобы он активировал только один div за раз.

<div class="indvWorkwrap col-lg-4"> 
    <div class="work"> 
     <div class="front"><img src="images/work1.png"></div> 
     <div class="back"><img src="images/work1_hover.png"></div> 
     <div class="details"> 
      <header> 
       <h1>MAGAZINE STARTUP for THE SAUCE</h1> 
       <p>Branding, web & magazine layout</p> 
      </header> 
     </div> 
    </div> 
</div> 

<div class="col-lg-4"> 
    <div class="work"> 
     <div class="front"><img src="images/work1.png"></div> 
     <div class="back"><img src="images/work1_hover.png"></div> 
     <div class="details"> 
      <header> 
       <h1>MAGAZINE STARTUP for THE SAUCE</h1> 
       <p>Branding, web & magazine layout</p> 
      </header> 
     </div> 
    </div> 
</div> 

<div class="col-lg-4"> 
    <div class="work"> 
     <div class="front"><img src="images/work1.png"></div> 
     <div class="back"><img src="images/work1_hover.png"></div> 
     <div class="details"> 
      <header> 
       <h1>MAGAZINE STARTUP for THE SAUCE</h1> 
       <p>Branding, web & magazine layout</p> 
      </header> 
     </div> 
    </div> 
</div> 

Jquery код:

$('.front').mouseenter(function() { 
    $(this).find('.details header').delay(100).animate({ 
     bottom: '-100px' 
    }); 
    $(this).find('.back').delay(400).fadeIn(200); 
}); 

$('.back').mouseleave(function() { 
    $(this).delay(100).fadeOut(200); 
    $(this).find('.details header').delay(400).animate({ 
     bottom: 0 
    }); 
}); 

Answer 1

Вам нужно siblings() и next() вместо находке. Как найти поиск у потомков, и вам нужно искать братьев и сестер.

$('.front').mouseenter(function() { 
    $(this).siblings ('.details').find('header').delay(100).animate({ 
     bottom: '-100px' 
    }); 
    $(this).next('.back').delay(400).fadeIn(200); 
});