Question

在这个例子中，当一个段落悬停在其颜色上时，它会变为蓝色，我希望所有兄弟段落也应用此规则。有没有办法可以实现这个CSS？

我使用jQuery在JavaScript中运行所需的功能，但是想要一个纯CSS解决方案。

<小时/> 修改：我的原始帖子中没有清楚，这应该只适用于选择元素。请参阅更新的HTML。

＆＃13;

img

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

将它们包裹在div中并将悬停效果放在：

上

＆＃13;

.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 */
}

＆＃13;

<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>

＆＃13;

触发CSS悬停效果给兄弟姐妹？

1 个答案: