悬停时，将活动状态添加到 div，然后检查 div 是否处于活动状态，如果处于活动状态，则将其他活动状态添加到单独的 div答案

【问题标题】：On hover, add active state to div, then check if div is active, then if active, add other active state to separate div悬停时，将活动状态添加到 div，然后检查 div 是否处于活动状态，如果处于活动状态，则将其他活动状态添加到单独的 div
【发布时间】：2020-09-21 23:56:19
【问题描述】：

我有一系列父 divs，其中第一个在加载时具有默认活动状态。
活动类在悬停时会被移除并添加到其他父 div。
但是，当parent div 具有其活动类时，我还希望我的函数将单独的活动类状态添加到另一个 div（技术上是 child div）。
首先child div 在加载时也有一个活动状态。
我使用的是 jQuery 而不是 CSS，因为当我将鼠标悬停在其相应的父级上时也会显示 third div，因此是 hov1、hov2 等。
另外，我想要加载时的默认活动状态。

这是我的 jQuery：

$('.parent').hover(function() {
    $('.active-parent').removeClass('active-parent');
    $(this).addClass('active-parent');
    if ($(this).hasClass('active-parent')) {
        $('.arrow-right').addClass('arrow-right-hov')
    }
    else {
        $('.arrow-right').removeClass('arrow-right-hov')
    }
}),

这是 HTML：

<h1 class="parent active-parent hov1">
    Cybersecurity
    <div class="arrow-right arrow-right-hov"></div>
</h1>
<h1 class="parent hov2">
    High-Performance Computing
    <div class="arrow-right"></div>
</h1>
<h1 class="parent hov3">
    High-Frequency Trading
    <div class="arrow-right"></div>
</h1>

非常感谢任何帮助 - 谢谢！

编辑：

这是最终工作的 javascript。不再有 if 声明。当悬停在具有相同 parent 类的另一个 div 上时，初始 arrow-right-hov 和 active-parent 默认状态将被删除。 arrow-right-hov 在存在 active-parent 类时添加。鼠标移出时保持活动状态。

$('.parent').hover(function() {
    $('.active-parent').removeClass('active-parent');
    //remove default parent active state when hovering another parent

    $(this).addClass('active-parent');
    //add active parent state on hovered div, remain active

    $('.arrow-right-hov').removeClass('arrow-right-hov')
    //remove default secondary active child class on parent hover

    $(this).children(".arrow-right").addClass('arrow-right-hov');
    //add active child class on active parent
}),

感谢ikiK 让我找到正确的方向！

【问题讨论】：

为什么不用 JS 而不是用 CSS 和 :hover 伪？

标签： javascript html jquery

【解决方案1】：

这个效果你在哪里？

如果是，则不需要if语句；

    $(this).addClass('active-parent');
//on this line you have added the class too hovered H1
    if ($(this).hasClass('active-parent')) {
// so this right after will always be true

你可以简单地定位

$(this).children(".arrow-right")

将其应用于.arrow-right班级的孩子

如果我有什么问题，请告诉我，进行调整。

$('.parent').hover(function() {
  $('.active-parent').removeClass('active-parent');
  $('.arrow-right').removeClass('arrow-right-hov');
//first remove from all on any parent hover
    $(this).addClass('active-parent');
    $(this).children(".arrow-right").addClass('arrow-right-hov');
//then add only to hoverd

})

.active-parent {
  color: red
}

.arrow-right-hov {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="parent active-parent hov1">
  Cybersecurity
  <div class="arrow-right arrow-right-hov">arrow-right</div>
</h1>
<h1 class="parent hov2">
  High-Performance Computing
  <div class="arrow-right">arrow-right</div>
</h1>
<h1 class="parent hov3">
  High-Frequency Trading
  <div class="arrow-right">arrow-right</div>
</h1>

欢迎来到 SO

【讨论】：

非常感谢您抽出宝贵时间！这非常接近，几乎得到它。我只添加了一两行，它就奏效了！
@EmilyJaynes 好吧，现在看到您的编辑，如果 HTML 标记在生产中与所讨论的相同；) 无论如何很高兴它有所帮助。

【解决方案2】：

有时不需要 JS。 CSS 和:hover 伪可以达到同样的效果：

/* STYLE ACTIVE and HOVER */
.parent.active-parent,
.parent:hover {
  color: HOTPINK;
}

/* STYLE ACTIVE and HOVER arrows */
.parent.active-parent .arrow-right,
.parent:hover .arrow-right{
  color: DEEPPINK;
}

.arrow-right:after {content: "\279c";}

<h1 class="parent active-parent hov1">
  Cybersecurity
  <span class="arrow-right"></span>
</h1>
<h1 class="parent hov2">
  High-Performance Computing
  <span class="arrow-right"></span>
</h1>
<h1 class="parent hov3">
  High-Frequency Trading
  <span class="arrow-right"></span>
</h1>

如果您愿意，您甚至可以定位一个父元素并在该共同父元素的状态为 :hover 时覆盖样式

【讨论】：