悬停父元素时如何将 svg 的不透明度设置为 0 - 1？

Question

我想在容器上创建一个悬停语句，当我将鼠标悬停在父容器上时，它向右移动 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);

悬停父元素时如何将 svg 的不透明度设置为 0 - 1？

How to set opacity of svg from 0 - 1 when hovering a parent element?

html

css

responsive-design