鼠标悬停（On hover）时p标签文字颜色不生效问题求助

嘿，我看你碰到了个小问题：鼠标悬停在#groupInsurance div上时，背景色正常生效，但里面的p标签文字颜色没跟着变化。这事儿我也遇过，大概率是你没给hover状态下的p标签单独指定颜色，咱们来一步步搞定它！

首先捋清楚核心原因：你当前的CSS应该只给#groupInsurance:hover设置了背景色，但子元素p的文字颜色不会自动继承父元素hover状态的变化——毕竟你一开始给.insuranceText设置了固定颜色对吧？

给你两个靠谱的解决方案：

方案一：直接在父元素hover时指定子元素颜色 #

这是最直接的处理方式，当鼠标悬停在div上时，同时修改背景色和p标签的文字颜色：

#groupInsurance {
  float: left;
  width: 145px;
  height: 125px;
  background-color: #EEEEEE;
  text-align: center;
  cursor: pointer;
}

/* 父元素hover时修改背景色 */
#groupInsurance:hover {
  background-color: #000000;
}

/* 父元素hover时，修改子元素p的文字颜色 */
#groupInsurance:hover .insuranceText {
  color: #FFFFFF; /* 这里换成你想要的hover文字色 */
}

.insuranceText {
  color: #333333; /* 初始文字颜色 */
  /* 加个过渡动画，让颜色变化更丝滑 */
  transition: color 0.3s ease;
}

方案二：排查样式优先级冲突 #

如果上面的代码还是不生效，那可能是有其他CSS规则覆盖了这个颜色。你可以打开浏览器开发者工具（按F12），选中这个p标签，查看「Styles」面板里的color属性有没有被划掉——如果有的话，就是有优先级更高的样式（比如带!important的规则，或者更具体的选择器）在捣乱。这时候你只需要把hover的选择器写得更具体就行，比如：

#groupInsurance.group-insurance:hover .insuranceText {
  color: #FFFFFF;
}

最后给你贴个完整的可运行代码示例：

<div id="groupInsurance" class="group-insurance">
  <img src="images/group-insurance.png" class="insuranceIcon g-img">
  <p class="insuranceText">GROUP<br>INSURANCE</p>
</div>

#groupInsurance {
  float: left;
  width: 145px;
  height: 125px;
  background-color: #EEEEEE;
  text-align: center;
  cursor: pointer;
  /* 给背景色也加过渡，统一动画效果 */
  transition: background-color 0.3s ease;
}

#groupInsurance:hover {
  background-color: #000;
}

.insuranceText {
  color: #333;
  transition: color 0.3s ease;
}

#groupInsurance:hover .insuranceText {
  color: #fff;
}

这样设置后，鼠标悬停时背景色和文字颜色就会同步变化啦！

内容的提问来源于stack exchange，提问作者Jason