如何用HTML、CSS结合span标签实现特定位置图片悬停切换效果？

实现思路 #

通过CSS相邻兄弟选择器，结合元素显示/隐藏状态切换，实现鼠标悬停第二个<span>时切换图片的效果，无需JavaScript。

完整代码 #

HTML结构

<div class="img-switch-container">
  <span>第一个Span标签</span>
  <span class="hover-trigger">第二个Span标签（悬停我切换图片）</span>
  <!-- 两张图片重叠放置，默认显示第一张 -->
  <img src="默认图片路径" alt="默认图片" class="default-image">
  <img src="切换后图片路径" alt="切换图片" class="hover-image">
</div>

CSS样式

.img-switch-container {
  position: relative;
  /* 可根据需求调整容器宽高、间距等样式 */
  margin-top: 20px;
}

/* 默认状态：切换图隐藏，默认图显示 */
.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

/* 悬停第二个Span时，切换图片显示状态 */
.hover-trigger:hover ~ .hover-image {
  display: block;
}
.hover-trigger:hover ~ .default-image {
  display: none;
}

说明 #

• 将代码中的默认图片路径和切换后图片路径替换为实际的图片地址
• 如需调整图片位置，可修改.img-switch-container的定位属性或图片的top/left值
• 该方案依赖CSS选择器逻辑，兼容性好，无需额外脚本

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