有什么方法可以隐藏元素中位于另一个元素下的部分吗？

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>

Answer 2

实现这一目标的最佳方法是使用不透明的颜色（在您的情况下为rgba(255, 231, 161,1)）。

如果您不需要不透明性，那就不要使用rgba并使用rgb或十六进制颜色。

Answer 3

只需更新此代码

.son:hover {
  background-color: #FFE7A2;
}