技术问题：如何实现鼠标悬停父div时修改子div背景色？

这事儿用纯CSS就能轻松搞定，不用折腾JS，我给你一步步说清楚：

核心思路就是利用CSS的hover伪类+后代选择器，当鼠标悬停在父容器上时，直接给子元素指定背景色样式，同时保留子元素自身的hover效果，这样两种场景（悬停父/悬停子）都能触发颜色变化。

完整代码示例 #

HTML结构

<div class="parent">
  父容器区域
  <div class="child">子容器区域</div>
</div>

CSS样式

/* 父容器基础样式，方便直观看到范围 */
.parent {
  padding: 20px;
  border: 1px solid #ddd;
}

/* 子容器默认样式 */
.child {
  background-color: #ffffff;
  padding: 10px;
  margin-top: 10px;
  transition: background-color 0.3s ease; /* 加个过渡动画，颜色变化更丝滑 */
}

/* 悬停子容器时的样式 */
.child:hover {
  background-color: #87ceeb;
}

/* 关键：悬停父容器时，子容器同步变色 */
.parent:hover .child {
  background-color: #87ceeb;
}

额外说明 #

• 如果父元素和子元素是直接父子关系（没有嵌套更深的层级），可以用直接子选择器.parent > .child来代替后代选择器，这样能避免意外影响其他深层的子元素，样式更精准。
• 要是想让父元素hover时子元素的颜色和子元素自身hover的颜色不一样，只需要修改.parent:hover .child里的background-color值就行。

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