Add CSS class on hover using jQuery

Question

I'm trying to add a CSS class on hover to an element using jQuery. However, the class should only be applied to the closest element with a specific class so I tried using .next

When I add the .next to my code though the class isn't added anymore (it works without that part of the code). This is the code:

$j('.products_overlay').hover(function(){
    $j(this).next('.hover_text').addClass('overlay_text'); 
}, function(){
    $j(this).next('.hover_text').removeClass('overlay_text');
});

Any idea what I'm doing wrong?

This is the HTML

<div class="products_overlay">
    <a href="..." title="product1" class="product-image">
        <img src="...." alt="product1" class="hover_test" />
    </a>
    <p class="hover_text">Test</p>
</div>

It sounds like .hover_text is not a sibling of .products_overlay so next() won't find it. We need to see your HTML to be able to help you fix this — Rory McCrossan
– Rory McCrossan, Commented Jul 27, 2016 at 13:39
without seeing html its hard to know, try $j(this).parent().find('.hover_text') — BritishSam
– BritishSam, Commented Jul 27, 2016 at 13:41

nicael · Accepted Answer · 2016-07-27 13:44:28Z

1

Should be

$j('.products_overlay .hoverText').addClass('overlay_text');

or

$j(this).find(".hoverText").addClass('overlay_text');

That's because next() doesn't look in the descendants, but in the next nodes.

answered Jul 27, 2016 at 13:44

nicael

19.1k13 gold badges65 silver badges93 bronze badges

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

Comments

Daniel Z. · Accepted Answer · 2016-07-27 13:52:42Z

1

Your problem is the next which only finds siblings

$j('.products_overlay').hover(function(){
    $j(this).next('.hover_text').addClass('overlay_text'); 
}, function(){
    $j(this).next('.hover_text').removeClass('overlay_text');
});

this in that case is the products_overlay div, so your .hover_text is a child and not a sibling.

To fix it use find:

$j('.products_overlay').hover(function(){
    $j(this).find('> .hover_text').addClass('overlay_text'); 
}, function(){
    $j(this).find('> .hover_text').removeClass('overlay_text');
});

edited Jul 27, 2016 at 13:52

answered Jul 27, 2016 at 13:45

Daniel Z.

3,4482 gold badges23 silver badges23 bronze badges

Comments

Rory McCrossan · Accepted Answer · 2016-07-27 13:47:52Z

Your jQuery code doesn't work as next() looks at siblings, yet .hover_text is a child of .products_overlay. As such you should use find(). You can also shorten the code using toggleClass():

$j(function($) {
    $('.products_overlay').hover(function(){
        $(this).find('.hover_text').toggleClass('overlay_text'); 
    });
});

That being said, given your HTML you don't need to use jQuery at all. You can achieve what you need in CSS alone:

.products_overlay:hover p {
  color: red; /* place the relevant hover styling in here */
}

<div class="products_overlay">
  <a href="..." title="product1" class="product-image">
    <img src="...." alt="product1" class="hover_test" />
  </a>
  <p class="hover_text">Test</p>
</div>

Collectives™ on Stack Overflow

Add CSS class on hover using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related