如何在鼠标悬停父元素时将子元素SVG的透明度从0设置为1？

这问题很常见，你只是漏掉了在父元素hover状态下针对子元素的样式声明而已😉

核心问题分析 #

你当前的CSS只定义了父元素.Parent:hover自身的样式变化，但没有关联到子元素.YELLOW_BOX，所以SVG盒子的透明度不会跟着改变。我们需要通过后代选择器，在父元素hover时触发子元素的样式更新。

完整解决方案 #

首先确保给.YELLOW_BOX设置初始透明状态，再通过父元素hover事件修改它的透明度，同时建议加上过渡动画让效果更平滑：

/* 父元素基础样式（把固定样式从hover里移出来，只保留变化属性） */
.Parent {
  position: absolute;
  width: 1180px;
  height: 199px;
  left: 46px;
  top: 50px;
  overflow: visible;
  /* 给父元素移动添加过渡动画 */
  transition: transform 0.3s ease;
}

/* 父元素hover时的位移效果 */
.Parent:hover {
  transform: translate(40px, 0);
}

/* 黄色SVG盒子初始状态：完全透明 */
.YELLOW_BOX {
  opacity: 0;
  /* 给透明度变化添加过渡动画 */
  transition: opacity 0.3s ease;
}

/* 关键：父元素hover时，切换子元素的透明度 */
.Parent:hover .YELLOW_BOX {
  opacity: 1;
}

你的HTML结构保持不变即可：

<div class="Parent">
  <svg class="YELLOW_BOX" viewBox="0 0 1180 140">
    <rect class="Yellow_box_class" rx="0" ry="0" x="0" y="0" width="1180" height="140"></rect>
  </svg>
  <div class="TEXT_Class">
    <span>TEXT</span>
  </div>
</div>

额外说明 #

• .Parent:hover .YELLOW_BOX这种写法是后代选择器，意思是当.Parent处于hover状态时，选中它内部所有.YELLOW_BOX元素并应用样式。
• 添加transition属性是为了让位移和透明度变化都有平滑的过渡效果，如果你不需要动画可以直接去掉，但建议保留提升用户体验。
• 把父元素的固定样式（比如position、width）从hover状态中分离出来，能让代码结构更清晰，避免不必要的样式覆盖问题。

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