如何设置svg的不透明度从0 - 1时悬停父元素?

Question

我想在容器上创建一个悬停语句，当我悬停在Parent上时，它向右移动40px，并且一个黄色框将其不透明度设置为0到1。右边的40px就可以了。但是盒子的问题让我很苦恼。

.Parent:hover {
position: absolute;
transform: translate(40px, 0);
width: 1180px;
height: 199px;
left: 46px;
top: 50px;
overflow: visible;
}

<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>

如何设置"YELLOW_BOX"不透明度到1时，悬停父节点?

Answer 1

应该能行

.parent:hover .yellow_box {
opacity: 0 !important;
}

Answer 2

谢谢你的回答。这似乎解决了我的问题

.Parent:hover .Yellow_box_class { 
opacity: 1; 
fill: rgba(255,237,89,1);