javascript - 触发 sibling 的CSS悬停效果？

This question already has answers here:

How to affect other elements when one element is hovered

                                    （6个答案）


                                去年关闭。


在此示例中，当一个段落悬停在其颜色更改为蓝色时，我希望所有同级段落也都应用此规则。有没有办法可以实现此CSS？

我具有使用jQuery的JavaScript所需的功能，但想要一个纯CSS解决方案。

编辑：在我的原始帖子中不清楚，这应该仅适用于选择元素。请参阅更新的HTML。

$(".groupHover").hover(
  function() {
    $(".groupHover").addClass("hoverClass");
  },
  function() {
    $(".groupHover").removeClass("hoverClass");
  }
);

.hoverClass {
  color: red;
}

.groupHover:hover {
  color: blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<p class=>Not to be changed!</p>
<p class="groupHover">Line 1</p>
<p class="groupHover">Line 2</p>
<p class=>Not to be changed!</p>
<p class="groupHover">Line 3</p>
<p class="groupHover">Line 4</p>
<p class=>Not to be changed!</p>

最佳答案

将它们包装在div中，然后将鼠标悬停在其上：

.wrapper:hover .groupHover {
  color: red;
}

.wrapper:hover .groupHover:hover {
  color: blue;                      /* try not to use important - it should only be used if you desperately need to override an inline style you have no control over */
}

<div class="wrapper">
  <p class="groupHover">Line 1</p>
  <p class="groupHover">Line 2</p>
  <p class="">No class, stays black</p>
  <p class="groupHover">Line 3</p>
  <p class="groupHover">Line 4</p>
</div>

关于javascript - 触发 sibling 的CSS悬停效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48345889/

上一篇：javascript - JavaScript小写onchange

下一篇：javascript - 在 50 个小块中用 Javascript 执行 10 万个 Promise

javascript - 通过 AJAX 发送表格/网格对象

javascript - 我可以从内部函数中屈服吗？

jquery - show() jquery 函数向下滑动我所有的内容

html - 如何在页脚中隐藏这个 div 类？

javascript - 重写JQ中的显示/隐藏多个Div以清除JS

html - 我的页脚下方有一个空白，但我找不到原因

html - 为什么溢出: hidden affect width

css - 在调整大小时向左剪切背景图像

html - 如何让这些 Bootstrap 列 div 在井内的长度一致？