CSS鼠标悬停文本切换问题：无法显示data-hover容器内容

问题说明 #

我想实现鼠标悬停容器时，隐藏原有文本、显示指定文本，同时文本要填满缩放后的容器。目前已经实现了悬停隐藏原文本和容器缩放动画，但data-hover里的文本始终不显示，请问漏了哪些CSS设置？

原代码如下：

CSS #

.process-section {
  margin: 20px auto 20px auto;
  padding: 50px 30px 30px 30px;
  background: rgb(223, 232, 236);
  display: flex;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px #737373;
  max-width: 1000px;
}
.container{
  display: flex;
  padding: 1rem;
  background: #3a5f77;
  position: relative;
  width: 100%;
  transition: 0.25s ease;
}
.container div{
  line-height: 2;
  background: #fff;
  padding: 5px;
  width: 100%;
  text-align: center;
}
.data-no-hover:hover{
  opacity: 0;
}
.container:hover{
  transform: scale(1.2);
}
.data-hover{
  display: none;
  opacity: 0;
}
.data-hover:hover{
  display: flex;
  color: white;
  opacity: 0.8;
  transform: scale(2);
}

HTML #

<section class="process-section">
  <div class="container">
    <div class="data-no-hover">
      <p>Text to display when not hovering</p>
    </div>
    <div class="data-hover">
      <p>Text to display when hovering</p>
    </div>
  </div> 
</section>

错误原因分析 #

• 触发逻辑错误：给data-hover自身绑定:hover事件，但实际需要的是父容器.container被悬停时，控制两个子元素的显示状态，而非子元素自身被hover
• 布局冲突：.container使用display: flex，导致两个子div并排显示，无法重叠
• 显示控制错误：data-hover初始设置display: none，但未通过父容器的hover状态切换该属性；多余的transform: scale(2)会导致文本溢出容器
• 容器适配问题：子元素未设置填满容器的布局属性，无法让文本撑满缩放后的容器

修正后的完整代码 #

CSS #

.process-section {
  margin: 20px auto 20px auto;
  padding: 50px 30px 30px 30px;
  background: rgb(223, 232, 236);
  display: flex;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px #737373;
  max-width: 1000px;
}
.container{
  display: flex;
  padding: 1rem;
  background: #3a5f77;
  position: relative; /* 作为子元素绝对定位的参照 */
  width: 100%;
  transition: 0.25s ease;
  overflow: hidden; /* 防止缩放时内容溢出 */
}
/* 两个子元素绝对定位，重叠覆盖整个容器 */
.container div{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 2;
  background: #fff;
  padding: 5px;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center; /* 让文本居中填满容器 */
  transition: opacity 0.25s ease; /* 平滑过渡显示/隐藏 */
}
.data-no-hover{
  opacity: 1; /* 默认显示原文本 */
}
/* 父容器hover时隐藏原文本 */
.container:hover .data-no-hover{
  opacity: 0;
}
.container:hover{
  transform: scale(1.2);
}
.data-hover{
  opacity: 0; /* 默认隐藏悬停文本 */
  background: transparent; /* 去掉白色背景，与容器背景融合 */
  color: white;
}
/* 父容器hover时显示悬停文本 */
.container:hover .data-hover{
  opacity: 0.8;
}

HTML #

<section class="process-section">
  <div class="container">
    <div class="data-no-hover">
      <p>Text to display when not hovering</p>
    </div>
    <div class="data-hover">
      <p>Text to display when hovering</p>
    </div>
  </div> 
</section>

关键修改说明 #

1. 布局重叠：给.container设置position: relative，两个子div设置position: absolute并覆盖整个容器区域，实现文本切换时的重叠效果
2. 触发逻辑修正：所有显示/隐藏控制都通过.container:hover父元素选择器实现，确保鼠标悬停容器时触发状态切换
3. 平滑过渡：用opacity替代display控制显示/隐藏，避免布局跳变，同时添加过渡动画提升体验
4. 容器适配：给子div添加display: flex + align-items + justify-content，让文本自动居中并填满容器
5. 移除冗余设置：删除data-hover的transform: scale(2)，避免文本溢出；去掉不必要的display: none设置

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