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

【问题标题】：Add class to single element and not all using JQuery on hover将类添加到单个元素，而不是全部在悬停时使用 JQuery
【发布时间】：2023-03-10 16:20:01
【问题描述】：

当我将鼠标悬停在页面上的锚标记上时，我正在尝试向图标添加一个类。

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

提前致谢。

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

完美，感谢您的意见。这样做有什么缺点吗：$('.column-content-link a').hover(function(){ $(this).parent().parent().find('.icon').toggleClass('hover'); $(this).parent().parent().find('h3').toggleClass('hover'); });
是的。如果您添加或删除其中一个父级，上述代码将中断。使用 id 或 class 精确选择选择器总是更好。这样当 dom 更改时破坏代码的机会最小。

【解决方案2】：

使用$(this) 上下文而不是$('.column-content .icon')

【讨论】：