如何实现鼠标悬停时文本淡出并替换为超链接的交互效果？

嘿，这个交互效果挺有创意的！我给你准备了一套纯HTML+CSS的实现方案，简单易维护，完全能达到你要的效果👇

核心是把原文本和目标链接放在同一个父容器里，通过CSS的opacity属性控制显示隐藏，搭配transition实现平滑的淡入淡出动画，最后用:hover伪类触发状态切换。

HTML 结构 #

先搭建基础结构，让原文本和链接共享同一个容器，保证它们能在同一位置重叠：

<div class="hover-swap-container">
  <span class="original-content">把鼠标移到我上面试试～</span>
  <a href="#" class="swap-link">这是替换显示的链接</a>
</div>

CSS 样式 #

接下来写样式，重点处理元素定位和过渡动画：

.hover-swap-container {
  position: relative; /* 让子元素的绝对定位基于这个容器 */
  display: inline-block; /* 容器宽度跟随内容，避免撑满整行 */
}

.original-content, .swap-link {
  position: absolute; /* 让两个元素完全重叠 */
  top: 0;
  left: 0;
  transition: opacity 0.3s ease; /* 0.3秒的平滑过渡，可自行调整速度 */
}

/* 默认状态：显示原文本，隐藏链接 */
.original-content {
  opacity: 1;
}
.swap-link {
  opacity: 0;
  color: #007bff; /* 给链接加个常规的蓝色 */
  text-decoration: none;
}

/* 鼠标悬停时的状态：隐藏原文本，显示链接 */
.hover-swap-container:hover .original-content {
  opacity: 0;
}
.hover-swap-container:hover .swap-link {
  opacity: 1;
}

小优化建议 #

• 如果原文本和链接的宽度不一致，可能会出现布局跳动，可以给容器设置固定宽度，或者让两个元素的宽度保持一致；
• 想要更丰富的动画，可以在transition里加入transform属性，比如添加上下位移效果：transition: opacity 0.3s ease, transform 0.3s ease;，然后在:hover时给元素加transform: translateY(3px);。

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