CSS鼠标悬停时Overlay遮罩层闪烁问题求助

我想要实现鼠标悬停时Overlay遮罩层的淡入淡出效果：默认状态下Overlay的透明度为0.4，鼠标悬停时透明度变为0。但当前实现出现了闪烁问题，尝试了两种方案均未解决：

第一种方案（使用transition） #

.MainPageCountry {
  display: flex;
}
.MainPageCountryContent {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.4;
  transition: 0.5s ease;
}
.overlay:hover {
  opacity: 0;
}
.overlay-country-name {
  font-size: 20px;
  margin: 0;
  padding: 3px 6px;
  border-radius: 5px;
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: #000;
  z-index: 3;
}

第二种方案（使用@keyframes） #

.MainPageCountry {
  display: flex;
}
.MainPageCountryContent {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.4;
}
.overlay:hover {
  animation: fadeOverlay 1s forwards;
}
@keyframes fadeOverlay {
  10% {
    opacity: 0;
  }
}
.overlay-country-name {
  font-size: 20px;
  margin: 0;
  padding: 3px 6px;
  border-radius: 5px;
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: #000;
  z-index: 3;
}

对应的HTML代码 #

<div class="MainPageCountry">
  <div class="MainPageCountryContent">
    <img class="MainPageCountryImage" src="..." alt="flag" />
    <div class="overlay"></div>
    <p class="overlay-country-name">Country Name</p>
  </div>
</div>

解决方案 #

闪烁的核心原因是：直接给.overlay绑定hover事件后，当遮罩层透明度变为0时，鼠标会“穿透”遮罩层，触发鼠标离开事件，导致遮罩层重新恢复透明度，接着又触发hover，循环往复造成闪烁。

正确的做法是把hover事件绑定到父容器.MainPageCountryContent上，父容器始终存在，不会因为遮罩层的透明度变化而丢失鼠标的hover状态。以下是修改后的代码（推荐使用transition方案，更简洁）：

.MainPageCountry {
  display: flex;
}
.MainPageCountryContent {
  position: relative;
  /* 确保父容器能接收hover事件 */
  cursor: pointer;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.4;
  transition: opacity 0.5s ease; /* 明确指定过渡属性，更规范 */
}
/* 父容器hover时，修改子元素overlay的透明度 */
.MainPageCountryContent:hover .overlay {
  opacity: 0;
}
.overlay-country-name {
  font-size: 20px;
  margin: 0;
  padding: 3px 6px;
  border-radius: 5px;
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: #000;
  z-index: 3;
}

HTML代码无需修改，保持原样即可。这样修改后，鼠标悬停在父容器区域内时，遮罩层会平滑过渡到透明度0，离开时恢复0.4，不会出现闪烁问题。

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