如何在悬停时更改 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>

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

Answer 1

您只需要添加一个更改锚元素的悬停效果即可。因为锚标记不会继承属性，就像存在 href 属性一样。

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

.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;
}