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