html - 在CSS中对不同类的悬停效果

我想对下面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>

鼠标悬停在文本上。问题是，我不能告诉图标或标题这样的所有元素同时产生悬停效果。

最佳答案

你把它们串成这样：

.wrapper:hover i,
.wrapper:hover h4,
.wrapper:hover p,
.wrapper:hover p {
   // some css here
}

顺便说一下，这就是为什么SASS和LESS这样的预处理器很有用，因为您可以这样声明块：

.wrapper {
  &:hover {
    i {
      // some css here
    }
    h4 {
      // some css here
    }
    p {
      // some css here
    }
  }
}

也就是说你只需要描述一次悬停状态，然后就可以把各种疯狂的风格从它链接到孩子们身上。

关于html - 在CSS中对不同类的悬停效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46812608/