Jquery hover add class and remove class on hover

Question

I have the following code of 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

The css of active-overlay is the following

.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?

Dekel · Accepted Answer · 2016-11-06 15:14:40Z

1

change

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

to

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

edited Nov 6, 2016 at 15:14

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

answered Nov 6, 2016 at 15:14

tomision

1,01412 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tomision Over a year ago

Why you $(function() {...} in document.ready listener? Maybe this is unnecessary

Collectives™ on Stack Overflow

Jquery hover add class and remove class on hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related