html - 悬停对CSS中不同类的影响

Question

我想对下面的 html 类中的所有元素都有悬停效果

HTML

.wrapper:hover {
  color: white;
}

<div class="wrapper">
  <i class="fa fa-icon"> </i>
  <h4> Headertext </h4>
  <p> Some content text </p>
  <p> <a href="url"> text </a> </p>
</div>

悬停在文本上起作用。问题是，我无法让图标或标题等所有元素同时采用悬停效果。

Answer 1

您可以使用 child combinator 定位所有子节点和 * 选择器

.wrapper:hover > * {
  color: white;
}

或针对个人:

.wrapper:hover > p {
  color: white;
}

或不太严格的 descendant combinator :

.wrapper:hover p {
  color: white;
}

无论哪种方式，要在将鼠标悬停在父级上时影响后代，您必须在父级上使用 :hover 选择器，然后选择后代。