Jquery悬浮添加类并在悬浮状态下删除类

I have the following code of html

我有下面的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>

And i want on hover of the div with class hover-block the closest dive with class hover-block-overlay to add another class which is called active-overlay

我想要在div的悬停上-用类hover-block-overlay来阻止最近的下潜，添加另一个叫做active-overlay的类

The css of active-overlay is the following

active-overlay的css如下所示

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

And what i've tried till now is this

我一直在尝试的就是这个。

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

      });
  });
});

So when i hover on the div it prints done but the class is not changed! Any idea?

所以当我悬停在div上时，它打印完成了，但是类没有改变!任何想法?

1 个解决方案

#1

change

改变

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

to

来

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