CSS实现同一位置文本hover时隐藏原文本显示新文本的方法

你的代码存在几个核心错误，导致悬停切换文本的效果无法生效，以下是具体分析和修复方案：

错误点解析 #

• CSS选择器类型不匹配：HTML里的两个span用的是id属性（id="name"、id="name2"），但你在CSS中错误使用了类选择器.name、.name2，导致样式无法匹配到目标元素。
• 无效的子元素选择器：#name:hover #name2是子元素选择器，但#name2和#name是同级关系，并非父子，这个选择器完全不起作用。
• 父元素未设置相对定位：两个span使用绝对定位，但父元素#Area没有设置position: relative，会导致span相对于整个页面定位，可能出现位置偏移，无法准确重叠。

修复后的完整代码 #

<div id="Area">
  <span id="name">big-name-1234156</span>
  <span id="name2">small-name</span>
</div>

<style>
#Area {
  position: relative; /* 让子元素的绝对定位基于父元素 */
  display: inline-block; /* 自适应内容宽度，避免占满整行 */
}

#name {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s; /* 可选：添加过渡动画让切换更平滑 */
}

#name2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 悬停父元素时切换两个文本的透明度 */
#Area:hover #name {
  opacity: 0;
}

#Area:hover #name2 {
  opacity: 1;
}
</style>

效果说明 #

• 父元素#Area设置position: relative后，两个绝对定位的span会精准重叠在父元素范围内。
• 鼠标悬停#Area区域时，#name隐藏、#name2显示，实现文本切换效果。
• 可选的transition属性能让透明度变化有平滑过渡，提升交互体验。

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