Kwnstantinos Natsios Kwnstantinos Natsios - 29 days ago 21
CSS Question

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?

Answer

change

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

to

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