悬停时如何更改 div 中每个元素的颜色？

Question

我试图在将鼠标悬停在 div 上时更改内容的颜色，包括 h4 标题，但标题没有变成白色。不知道如何实现：

.iconbox-blue {
  background: #fff;
  color: #000;
}

.iconbox-blue:hover {
  color: #fff;
  background: blue;
}

<div class="iconbox-blue">
  <a href=''>
    <h4 class="icon-box-title">Header</h4>
  </a>
  <p class="icon-box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>

我做错了什么？将鼠标悬停在 iconbox-blue div 上时如何使 h4 标题颜色变为白色？

Answer 1

您只需要简单地添加一个悬停效果来改变锚元素。由于锚标记不会像存在 href 属性那样继承属性。

.iconbox-blue:hover a{
  color: #fff;
}

.iconbox-blue {
  background: #fff;
  color: #000;
}

.iconbox-blue:hover {
  color: #fff;
  background: blue;
}
.iconbox-blue:hover a{
  color: #fff;
}

<div class="iconbox-blue">
  <a href=''>
    <h4 class="icon-box-title">Header</h4>
  </a>
  <p class="icon-box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</div>

Answer 2

为 H4 添加一种额外的样式：

.iconbox-blue:hover,
.iconbox-blue:hover h4 {
   color: #fff;
   background: blue;
}

悬停时如何更改 div 中每个元素的颜色？

How to change color on every element in div when hovering?

html

css

hover