jQuery悬停添加类和悬停删除类

Question

我有下面的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 的 div 上最近的潜水类 hover-block-overlay 添加另一个名为 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');