jQuery的懸停添加類和刪除懸停

Question

I類有HTML

<div class="hover-block service-block"> 
        <div class="hover-block-text"> 
         <a href="#"><span class="displace">Haircut</span></a> 
         <h2>$40 <span>/</span> Haircut</h2> 

         <span class="icon">7</span> 

         <p>Our Best of Boston-winning haircut comes with a shampoo and conditioning treatment, neck shave, and complimentary beverage.</p> 
        </div><!-- /hover-block-text --> 

        <div class="hover-block-overlay"> 
         <a href="http://example.com/con"><img src="http://example.com/image.jpg" alt="Haircut" title="Haircut"></a> 
        </div><!-- /hover-block-overlay --> 
       </div> 

的下面的代碼，我想與hover-block類hover-block-overlay類最接近潛水的div懸停添加被稱爲另一個類active-overlay

的active-overlay的CSS如下

.active-overlay { 
    opacity: 1; 
    top: 0; 
} 

什麼，我已經試過至今是這

jQuery(document).ready(function($){ 
    $(function() { 
      $('.hover-block').hover(function(){ 
      $(this).closest('div.hover-block-overlay').addClass('active-overlay'); 
      console.log("done"); 
     }, function(){ 

     }); 
    }); 
}); 

所以，當我在DIV上懸停它打印done但類沒有改變！ 有什麼想法？

Answer 1

變化

$(this).closest('div.hover-block-overlay').addClass('active-overlay'); 

到

$(this).find('div.hover-block-overlay').addClass('active-overlay');