CODEWITHSUNDEEP
jquery
glittergirl
glittergirl

Reputation: 523

How to toggle a secondary class using 'this' jquery selector

I want only the current '.image-content' class thats being hovered to toggle 'hover' class.

I know of the 'this' jquery selector but don't know how to implement it correctly in this situation

$('.image-content').hover(function() {
  $('.image-content-overlay').toggleClass('hover');
});

I want 'this' .image-content hover to toggle the class on .image-content-overlay

HTML

<div class="image-wrapper">
  <div class="image-content">
    <div class="image-content-overlay"></div>
        <img class="content-image" src="Events_Racquet.jpg">
        <div class="content-details fadeIn-bottom">
        <div class="content-title">Racquet by Racquet Club</div>
    </div>
  </div>
</div>

Upvotes: 2

Views: 28

Answers (1)

Rob Kwasowski
Rob Kwasowski

Reputation: 2780

If you want just the .image-content-overlay that's inside the .image-content that you've hovered to be toggled you can use this like this:

$('.image-content').hover(function() {
  $(this).find('.image-content-overlay').toggleClass('hover');
});

Upvotes: 1

Related Questions