css - 有没有办法隐藏另一个元素下的部分？

Question

在图像中可以看到，当我制作悬停效果时，下方会显示绿色框。 当我将鼠标悬停在黄色框上时，我不想看到相交的绿色部分并且可以通过不透明度看到 有什么办法可以把相交的部分剪掉或者不显示吗？

这是我的代码:

<div class="container">
  <div class="son">
    This is a title, while has hovering, I dont should see the green square under
  </div>
</div>

.container{
  height: 507px;
  width: 500px;
  background-color: rgba(168,207,69,1);
  border-radius: 32px;
  margin-top:50px;
  z-index:1;
}
.son:hover{

  background-color: rgba(255,207,69,0.5);

}
.son{
  z-index:2;
  position:relative;
  top:-20px;
  width: 300px;
  height:50px;
  background-color: rgba(255,207,69,1);
}

https://jsfiddle.net/7zm8ascx/

Answer 1

只需在 .son:hover background-color 中使用 100% 不透明度。这将覆盖绿色矩形。 (显然，您需要更改颜色值以获得与 50% 不透明度相同的颜色。)

.container {
  background-color: rgba(168,207,69,1);
  border-radius: 32px;
  height: 500px;
  margin-top: 50px;
  width: 500px;
}
.son:hover {
  background-color: rgba(254,230,166,1);
}
.son {
  background-color: rgba(255,207,69,1);
  height: 50px;
  position: relative;
  top: -20px;
  width: 300px;
}

<div class="container">
  <div class="son">
    This is a title, while has hovering, I dont should see the green square under
  </div>
</div>