解决悬停底层元素触发上层显示元素时的闪烁问题

你遇到的闪烁问题根源很明确：上层元素显示后，因为层级更高，鼠标移上去时会脱离底层div的hover范围，导致上层隐藏；紧接着鼠标又“落回”底层div，再次触发hover显示上层，形成循环。

这里给你两种实用解决方案：

方案一：让上层元素穿透鼠标事件（适合上层无需交互的场景） #

给上层的.ning和.bo类添加pointer-events: none，这样鼠标事件会直接穿透到下层的底层div，底层的hover状态不会丢失，上层就能一直保持显示。

修改后的CSS代码：

.ning, .bo {
  position:absolute;
  top:70%;
  left:10%;
  width:70%;
  height:10%;
  visibility:hidden;
  z-index:2;
  pointer-events: none; /* 新增：禁用鼠标事件穿透 */
}

/* 其余原有CSS保持不变 */
.ning-img, .bo-img {
  position:absolute;
    width:50%;
    height:100%;
    overflow:hidden;
    background-position: center center;
    background-size:cover;
    clip-path: polygon(32% 0, 100% 0, 68% 100%, 0% 100%);

}

.ning-img {
  left:0%;
  background-color:green;
}

.bo-img {
  left:50%;
  background-color:blue;
}

.ning {
  background-color:purple;
}

.bo {
  background-color:yellow;
}

.bo-img:hover ~ .bo {
    animation-name:anim;
    animation-duration: 0.2s;
        animation-fill-mode: forwards;

}


.ning-img:hover ~ .ning {
    animation-name:anim;
    animation-duration: 0.2s;
        animation-fill-mode: forwards;

}

@keyframes anim {
    100% {
        visibility: visible;
    }
}

方案二：将hover绑定到父容器（适合上层需要交互的场景） #

如果上层元素需要响应点击等鼠标事件，就把每个底层div和对应的上层元素放到同一个父容器里，然后给父容器设置hover触发逻辑。这样只要鼠标在父容器范围内，不管是底层还是上层，hover状态都能保持。

修改后的HTML代码：

<!DOCTYPE html>
<html>
<body>
<div class="images">
  <div class="ning-container">
    <div class="ning-img"></div>
    <div class="ning">hello</div>
  </div>
  <div class="bo-container">
    <div class="bo-img"></div>
    <div class="bo">hello2</div>
  </div>
</div>
</html>

修改后的CSS代码：

/* 新增父容器样式 */
.ning-container, .bo-container {
  position:absolute;
  width:50%;
  height:100%;
}
.ning-container {
  left:0;
}
.bo-container {
  left:50%;
}

.ning-img, .bo-img {
  position:absolute;
  width:100%; /* 改为100%适配父容器 */
  height:100%;
  overflow:hidden;
  background-position: center center;
  background-size:cover;
  clip-path: polygon(32% 0, 100% 0, 68% 100%, 0% 100%);
}

.ning-img {
  background-color:green;
}

.bo-img {
  background-color:blue;
}

.ning, .bo {
  position:absolute;
  top:70%;
  left:10%;
  width:70%;
  height:10%;
  visibility:hidden;
  z-index:2;
}

.ning {
  background-color:purple;
}

.bo {
  background-color:yellow;
}

/* 修改hover触发逻辑为父容器hover */
.ning-container:hover .ning {
    animation-name:anim;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

.bo-container:hover .bo {
    animation-name:anim;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

@keyframes anim {
    100% {
        visibility: visible;
    }
}

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