CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Javacadabra
Javacadabra

Reputation: 5758

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

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>

Upvotes: 0

Views: 118

Answers (2)

ajinkya narkar
ajinkya narkar

Reputation: 382

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

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

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');
});

Upvotes: 4

Related Questions