CODEWITHSUNDEEP
jqueryhtmlcsshover
Konstantinos Natsios
Konstantinos Natsios

Reputation: 2924

Jquery hover add class and remove class on hover

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?

Upvotes: 1

Views: 557

Answers (1)

tomision
tomision

Reputation: 994

change

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

to 

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

Upvotes: 1

Related Questions