如何实现鼠标悬停图片时显示对应f1链接？现有代码不生效求解决方案

• 选择器逻辑错误：你使用的.caine1 img:hover #f1为后代选择器，仅能匹配img标签内部的#f1元素，但实际#f1是img的同级兄弟元素，无法被该选择器命中。
• 父容器缺少定位属性：#f1设置了绝对定位，父元素.caine1未设置相对定位的话，链接会相对于整个页面定位，显示位置会偏离图片区域。
• HTML语法不规范：<img>是自闭合标签，不需要额外写</img>结束标签。

HTML 代码 #

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

CSS 代码 #

.caine1 {
  position: relative;
  width: fit-content;
}

#f1 {
  position: absolute;
  /* 可自行调整位置参数，当前设置为图片右下角10px位置 */
  bottom: 10px;
  right: 10px;
  display: none;
  z-index: 200;
}

/* 父容器悬停时显示链接，鼠标在图片/链接上都不会导致链接消失，体验更友好 */
.caine1:hover #f1 {
  display: inline-block;
}

如果你确实要求仅当鼠标悬停在图片本体上才显示链接，可将最后一段CSS选择器替换为.caine1 img:hover + #f1，但该写法下鼠标移到链接上时链接会自动消失，交互体验较差。

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