如何实现鼠标悬停时在独立DIV中切换显示对应文本（纯CSS方案）

实现方案 #

无需嵌套结构，利用CSS通用兄弟选择器即可实现链接与目标区域的独立关联，以下是完整代码：

CSS 代码

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  padding: 20px;
}

/* 链接样式 */
.link {
  display: inline-block;
  margin-right: 25px;
  color: #2196F3;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.link:hover {
  border-color: #2196F3;
}

/* 内容容器：固定位置，所有内容块共享此区域 */
.content-container {
  position: absolute;
  top: 60px;
  left: 20px;
  width: 320px;
  border: 2px solid #ff8900;
  border-radius: 20px;
  padding: 20px;
  min-height: 120px;
}

/* 内容块默认隐藏 */
.content {
  display: none;
  color: #474747;
  line-height: 1.5;
}

/* 链接hover时显示对应内容块 */
.link-icecream:hover ~ .content-container .content-icecream,
.link-bananas:hover ~ .content-container .content-bananas {
  display: block;
}

HTML 代码

<div class="wrapper">
  <a href="#" class="link link-icecream">Ice cream</a>
  <a href="#" class="link link-bananas">Bananas</a>

  <div class="content-container">
    <div class="content content-icecream">冰淇淋是一种冷冻甜品，通常以牛奶、奶油为基底，搭配糖与香料制成，口感绵密香甜，是夏日热门消暑食品。</div>
    <div class="content content-bananas">香蕉是热带水果的代表之一，富含钾元素与膳食纤维，口感软糯清甜，既可直接食用，也能用于制作烘焙品或奶昔。</div>
  </div>
</div>

核心原理 #

• 使用通用兄弟选择器（~）：当指定链接被hover时，选中后续同级的content-container内对应类名的内容块，切换其显示状态
• 内容块通过绝对定位固定在同一区域，默认隐藏，hover时仅显示对应内容
• 链接与内容容器为同级关系，完全独立，无需嵌套

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