如何使用CSS实现hover时卡片原文本消失、另一文本显示效果

原代码存在3个核心问题导致效果无法生效：

• 选择器使用错误：.card:hover+.hide 采用相邻兄弟选择器+，但.hide是.card的子元素而非同级节点，无法被匹配
• CSS语法错误：.card-text的字号属性写为font size，缺少连字符，正确属性名是font-size
• 交互逻辑缺失：仅定义了hover状态下.hide的背景样式，既没有编写默认文本的隐藏规则，也没有定义.hide的显示规则，且悬停态文本未做定位，会偏离预期展示位置

修正后完整代码 #

CSS部分 #

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #D65076;
}

.card {
  width: 500px;
  height: 300px;
  position: absolute;
  color: white;
  left: 25%;
  top: 25%;
  background: #FF6F61;
  transition: ease-in-out 0.6s;
  cursor: pointer;
}

/* 默认展示文本样式 */
.card-h1 {
  font-size: 30px;
  position: absolute;
  left: 50px;
  top: 50px;
  transition: opacity 0.3s ease;
}

.card-text {
  font-size: 17px;
  position: absolute;
  left: 50px;
  top: 150px;
  line-height: 1.5;
  transition: opacity 0.3s ease;
}

/* 悬停态文本默认隐藏 */
.hide {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* 鼠标悬停时隐藏默认文本 */
.card:hover .card-h1,
.card:hover .card-text {
  opacity: 0;
  visibility: hidden;
}

/* 鼠标悬停时显示悬停态文本 */
.card:hover .hide {
  opacity: 1;
  visibility: visible;
}

HTML部分 #

原HTML结构无需大幅调整，可直接使用：

<body>
  <div class="card">
    <div class="card-h1">
      BergWerk
    </div>
    <div class="card-text">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident <br> modi labore esse aliquam rem, voluptatem porro veritatis assumenda <br> inventore neque quas dolore maiores deleniti officia dignissimos autem <br> eum nihil aliquid minima
      debitis corporis id quam! Error debitis nulla <br> explicabo repellendus quo consequatur vel hic illo, voluptates reprehe <br>
    </div>
    <div class="hide">
      <h1>Hello WORLD</h1>
    </div>
  </div>
</body>

实现说明 #

• 采用opacity + visibility控制元素显隐，相比display: none可以配合transition实现平滑的淡入淡出效果，交互体验更好
• 改用后代选择器.card:hover .hide匹配卡片内部的悬停态文本，选择器逻辑正确
• 给悬停态文本添加了绝对定位和垂直居中样式，你可以根据设计需求自行调整位置、字号、颜色等属性
• 修复了原代码中的CSS语法错误

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