CSS实现图片hover显示链接时链接闪烁卡顿如何修复

问题原因 #

• 闪烁的核心逻辑是你当前仅给img元素绑定了hover触发显示链接的规则，当鼠标移动到弹出的链接上时，鼠标就脱离了img元素的hover范围，链接会立刻回到display: none的隐藏状态；隐藏后鼠标又重新处于img上方，再次触发hover显示链接，就会反复循环出现闪烁卡顿的现象
• 额外问题：你没有给父容器设置position: relative，绝对定位的链接会相对于全局根元素定位，位置不会跟随图片对齐

修复后完整可运行代码 #

CSS 部分 #

/* 给父容器加相对定位，作为内部绝对定位元素的参照 */
.caine1 {
  position: relative;
  /* 宽度和图片一致，避免hover空白区域也触发显示 */
  width: fit-content;
}
.fm a {
  position: absolute;
  display: none;
  background-color: #5D5D5D;
  color: pink;
  padding: 10px;
  /* 可自行调整链接弹出位置，示例为距离图片顶部20px、左侧20px */
  top: 20px;
  left: 20px;
  z-index: 1;
}
/* 把hover触发改到父容器上，只要鼠标在父容器范围内（包含图片和弹出的链接），链接就保持显示 */
.caine1:hover .fm a {
  display: block;
}

HTML 部分 #

<div class="caine1">
  <img src="1.png" width="400" height="250" alt="示例图片">
  <div class="fm">
    <a href="#" id="f1">Female</a>
  </div>
</div>

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