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悬停在与班级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');

Jquery悬停添加类并在悬停时删除类

1 个答案: