Mousenter on individual div

Question

我有3個div與同一個類，這意味着當我將鼠標懸停在一個上面時，它將激活它們。我看了一下，它說如果你使用$（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); 
});