javascript - 将类添加到单个元素而不是全部在悬停时使用 JQuery

Question

当我将鼠标悬停在我页面上的 anchor 标记上时，我试图将一个类添加到一个图标。

但是当我悬停时，它会将悬停类应用于所有元素，并带有图标类。我怎样才能将其选中，以便它只针对我悬停在其中的列中的图标。

提前致谢。

$('.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>

Answer 1

遍历到最近的父元素(.column-content)，然后在其中找到目标元素:

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