如何通过鼠标悬停显示/切换对应板块？（禁止使用JavaScript）

你的CSS方案失效的核心原因是HTML结构限制了CSS选择器的作用范围：.menu-header 位于 .menu-headers 容器内，而目标板块在同级的 .menu-sections 容器中。CSS没有父选择器，无法通过子元素的 hover 状态向上影响父容器，再选中兄弟容器里的目标元素。下面提供两种可行的纯CSS解决方案：

方案一：调整HTML结构（推荐，兼容性最好） #

将每个标题与对应的板块放在同一个父容器中，利用CSS的子选择器实现hover关联：

修改后的HTML #

<div class="menu-container">
  <div class="menu-item">
    <div class="menu-header">Tickets</div>
    <div class="menu-section" id="tickets">Tickets 板块内容</div>
  </div>
  <div class="menu-item">
    <div class="menu-header">Dinings</div>
    <div class="menu-section" id="dinings">Dinings 板块内容</div>
  </div>
  <div class="menu-item">
    <div class="menu-header">Hotels</div>
    <div class="menu-section" id="hotels">Hotels 板块内容</div>
  </div>
</div>

对应CSS #

/* 默认隐藏所有板块 */
.menu-section {
  display: none;
  /* 可选：添加基础样式，方便测试 */
  padding: 1rem;
  border: 1px solid #eee;
}

/* 默认显示Tickets板块 */
#tickets {
  display: block;
}

/* 鼠标悬停标题时，显示当前板块 */
.menu-item:hover .menu-section {
  display: block;
}

/* 可选：优化交互——hover任意标题时，仅显示当前板块，隐藏其他 */
.menu-container:hover .menu-section {
  display: none;
}
.menu-container:hover .menu-item:hover .menu-section {
  display: block;
}
/* 保持未hover状态下Tickets默认显示 */
.menu-container:not(:hover) #tickets {
  display: block;
}

方案二：不修改现有HTML（利用:has()选择器） #

如果无法调整HTML结构，可以使用CSS的:has()选择器（注意：该选择器不支持IE及旧版浏览器，主流现代浏览器已兼容）：

对应CSS #

/* 默认隐藏所有板块 */
.menu-section {
  display: none;
  padding: 1rem;
  border: 1px solid #eee;
}

/* 默认显示Tickets板块 */
#tickets {
  display: block;
}

/* 当hover Dinings标题时，显示对应板块 */
.menu-container:has(.menu-header[data-target="dinings"]:hover) #dinings {
  display: block;
}

/* 当hover Hotels标题时，显示对应板块 */
.menu-container:has(.menu-header[data-target="hotels"]:hover) #hotels {
  display: block;
}

/* hover任意标题时，隐藏默认的Tickets板块 */
.menu-container:has(.menu-header:hover) #tickets {
  display: none;
}

原有CSS失效原因说明 #

• .dining-m:hover+.dinings：+是相邻兄弟选择器，要求两个元素必须是同一父容器下的直接相邻元素，但.dining-m在.menu-headers内，.dinings在.menu-sections内，两者并非兄弟关系，因此无效。
• .menu-header[data-target="dinings"]:hover~.menu-sections #dinings：~是通用兄弟选择器，同样要求元素处于同一父容器下。.menu-header的父容器是.menu-headers，.menu-sections是.menu-headers的兄弟，所以该选择器无法从.menu-header的hover状态关联到.menu-sections内的元素，逻辑不成立。

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