JQuery Hover-Klasse hinzufügen und entfernen Klasse auf schweben

Question

Ich habe den folgenden Code von 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> 

und ich möchte auf schweben der div mit der Klasse hover-block die am nächsten Tauchgang mit Klasse hover-block-overlay eine andere Klasse hinzuzufügen, die aufgerufen wird, active-overlay

die css von active-overlay ist die folgende

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

Und was ich bisher ausprobiert habe ist Also die

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

     }); 
    }); 
}); 

, wenn ich auf dem div schweben druckt done aber die Klasse wird nicht verändert! Irgendeine Idee?

Answer 1

Änderung

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

zu

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