Question

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

然而当我悬停时，它会将悬停类应用于带有图标类的所有元素。我如何单独使用它，它只针对我在其中悬停的列中的图标。

提前致谢。

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

Answer 2

使用$(this)上下文代替$('.column-content .icon')

将类添加到单个元素而不是所有在悬停时使用JQuery

2 个答案: