悬停时如何更改div中每个元素的颜色？ [复制]答案

【问题标题】：How to change color on every element in div when hovering? [duplicate]悬停时如何更改div中每个元素的颜色？ [复制]
【发布时间】：2021-02-19 07:11:57
【问题描述】：

当我将鼠标悬停在 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 标题颜色变为白色？

【问题讨论】：

因为标题在链接中，您需要单独设置样式 - 链接有自己的样式，需要覆盖
链接不继承颜色属性：stackoverflow.com/questions/1144931/…
顺便说一句。清理html。在h4 内插入链接，而不是链接内的标题

标签： html css hover

【解决方案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>

【讨论】：

正是我想要的！谢谢

【解决方案2】：

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

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

【讨论】：