如何将悬停显示图片的a标签替换为div，去除链接效果？

把原代码里的链接结构改成列表结构，调整CSS选择器即可实现需求，同时去掉链接的默认样式：

完整代码 #

CSS #

.hover-img-list {
  list-style: none; /* 去掉默认列表圆点 */
  padding-left: 0;
}
.hover-img-list li {
  position: relative;
  margin: 10px 0; /* 给列表项加间距 */
  cursor: pointer; /* 鼠标悬停显示手型，提示可交互 */
}
.hover-img-list li span {
  position: absolute;
  left: 120px; /* 图片显示在文本右侧，可根据需求调整 */
  top: 0;
  display: none;
  z-index: 99;
}
.hover-img-list li:hover span {
  display: block;
}

HTML #

<ul class="hover-img-list">
  <li>flippe flute
    <span><img src="//picsum.photos/200?c=1" alt="flippe flute" height="200" /></span>
  </li>
  <li>pottery flute
    <span><img src="//picsum.photos/200?c=2" alt="pottery flute" height="200" /></span>
  </li>
</ul>

关键修改点 #

• 将原<div>+<a>的结构替换为<ul>列表，用<li>作为交互单元，符合列表展示需求
• 调整CSS选择器，从针对<a>改为针对<li>
• 去掉列表默认的圆点和内边距，优化视觉效果
• 给<li>添加cursor: pointer，提升交互提示性
• 调整图片的定位位置（left属性），避免图片覆盖文本

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