Add class to single element and not all using JQuery on hover

Question

I am trying to add a class to an icon when I hover over an anchor tag on my page.

However when I hover it applies the hover class to ALL the elements with the icon class. How can I single this so it only targets the icon in the column I am hovering within.

Thanks in advance.

$('.column-content-link a').hover(function(){
   $('.column-content .icon').toggleClass('hover');
   $('.column-content h3').toggleClass('hover');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column-content">
        <div class="column-content-header">
                <i class="icon fa fa-rocket"></i>
            <h3 class="">Heading 1</h3>
            <p><span>Blue bottle heirloom cronut, iceland salvia austin swag af photo booth church-key vinyl yuccie pour-over venmo bitters. Drinking vinegar humblebrag banh mi godard. Cronut lyft actually iceland, pabst chia small batch fam. Aesthetic organic ennui stumptown. </span></p>
        </div>
        <div class="column-content-link">
                <a href="https://www.google.com">Learn more</a>
        </div>
</div>

<div class="column-content">
        <div class="column-content-header">
                <i class="icon fa fa-rocket"></i>
            <h3 class="">Heading 2</h3>
            <p><span>Blue bottle heirloom cronut, iceland salvia austin swag af photo booth church-key vinyl yuccie pour-over venmo bitters. Drinking vinegar humblebrag banh mi godard. Cronut lyft actually iceland, pabst chia small batch fam. Aesthetic organic ennui stumptown. </span></p>
        </div>
        <div class="column-content-link">
                <a href="https://www.google.com">Learn more</a>
        </div>
</div>

<div class="column-content">
        <div class="column-content-header">
                <i class="icon fa fa-rocket"></i>
            <h3 class="">Heading 3</h3>
            <p><span>Blue bottle heirloom cronut, iceland salvia austin swag af photo booth church-key vinyl yuccie pour-over venmo bitters. Drinking vinegar humblebrag banh mi godard. Cronut lyft actually iceland, pabst chia small batch fam. Aesthetic organic ennui stumptown. </span></p>
        </div>
        <div class="column-content-link">
                <a href="https://www.google.com">Learn more</a>
        </div>
</div>

<div class="column-content">
        <div class="column-content-header">
                <i class="icon fa fa-rocket"></i>
            <h3 class="">Heading 4</h3>
            <p><span>Blue bottle heirloom cronut, iceland salvia austin swag af photo booth church-key vinyl yuccie pour-over venmo bitters. Drinking vinegar humblebrag banh mi godard. Cronut lyft actually iceland, pabst chia small batch fam. Aesthetic organic ennui stumptown. </span></p>
        </div>
        <div class="column-content-link">
                <a href="https://www.google.com">Learn more</a>
        </div>
</div>

Milind Anantwar · Accepted Answer · 2017-04-28 07:53:20Z

4

Traverse to closest parent element(.column-content) and then find target elements in it:

$('.column-content-link a').hover(function(){
  var $closestColContent = $(this).closest('.column-content');
  closestColContent.find('.icon,h3').toggleClass('hover');
});

answered Apr 28, 2017 at 7:53

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

2 Comments

Javacadabra Over a year ago

Perfect, thank you for your input. Is there any disadvantage to doing it this way:

$('.column-content-link a').hover(function(){     $(this).parent().parent().find('.icon').toggleClass('hover');         $(this).parent().parent().find('h3').toggleClass('hover');         });

Milind Anantwar Over a year ago

Yes there is.Above code will break if you add or remove one of the parent. Its always better to choose selector precisely using id or class. That way the chances of breaking the code when dom changes are minimum.

ajinkya narkar · Accepted Answer · 2017-04-28 07:53:32Z

1

Use $(this) context instead of $('.column-content .icon')

answered Apr 28, 2017 at 7:53

ajinkya narkar

3821 silver badge4 bronze badges

Collectives™ on Stack Overflow

Add class to single element and not all using JQuery on hover

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related