本文介绍如何仅用 CSS（无需 JavaScript）实现段落中多个文本片段分别悬停时，精准显示各自关联的隐藏区块，核心依赖现代 CSS :has() 选择器完成父容器级条件判断。
本文介绍如何仅用 css（无需 javascript）实现段落中多个文本片段分别悬停时，精准显示各自关联的隐藏区块，核心依赖现代 css `:has()` 选择器完成父容器级条件判断。
在传统 CSS 中，由于选择器只能向后（后代、相邻兄弟、一般兄弟）匹配，无法“向上”选择父元素或跨层级定位非直接兄弟元素，因此像 .txt1:hover + .hide1 这类写法会失效——因为 .hide1 并非 .txt1 的紧邻兄弟元素（中间隔着 <p></p>），而是同级子元素，属于 .div1 的另一个子节点。
解决方案是利用 CSS 新增的 :has() 关系选择器：它允许我们基于子元素的状态来选中其祖先元素，再通过后代选择器精准控制目标隐藏区块。例如 .div1:has(.txt1:hover) .hide1 表示：“当 .div1 内部存在处于 :hover 状态的 .txt1 元素时，选中其内部的 .hide1”。
以下是完整、可运行的实现代码：
body {
background-color: #eee;
}
.div1 {
height: 30px;
padding: 50px 0 60px 0;
margin: auto;
position: relative;
text-align: center;
}
.show {
padding: 0 0 15px 0;
margin: 0;
}
.hide1, .hide2 {
display: none;
opacity: 0;
background-color: #eee;
border: 1px #666 solid;
/* 推荐添加过渡效果提升体验 */
transition: opacity 0.2s ease, display 0.2s ease;
}
.txt1, .txt2 {
font-weight: bold;
color: #bc2f00;
cursor: pointer; /* 明确提示可交互 */
}
/* 核心逻辑：通过 :has() 触发父容器状态，再定位目标隐藏块 */
.div1:has(.txt1:hover) .hide1 {
display: block;
opacity: 1;
}
.div1:has(.txt2:hover) .hide2 {
display: block;
opacity: 1;
}<div class="div1">
<p class="show">
Lorem ipsum<span class="txt1"> dolor</span> sit amet,<span class="txt2"> consectetur</span> adipiscing elit.
</p>
<div class="hide1">
<table>
<tr>
<td rowspan="2"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style="max-width:90%" style="max-width:90%" viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23ddd'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='12' fill='%23999'%3ETEST%3C/text%3E%3C/svg%3E" alt="test"></td>
<td><a href="#">Hidden Text 1 ></a></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales.</td>
</tr>
</table>
</div>
<div class="hide2">
<table>
<tr>
<td rowspan="2"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style="max-width:90%" style="max-width:90%" viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23ddd'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='12' fill='%23999'%3ELOGO%3C/text%3E%3C/svg%3E" alt="logo"></td>
<td><a href="#">Hidden Text 2</a></td>
</tr>
<tr>
<td>Duis tellus ligula, volutpat et cursus in, euismod in magna.</td>
</tr>
</table>
</div>
</div>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
-
:has()是现代浏览器（Chrome 105+、Edge 105+、Safari 15.4+、Firefox 121+）支持的特性，使用前建议检查目标用户浏览器兼容性；如需兼容旧版 IE 或早期浏览器，需回退至 JS 方案。 - 隐藏区块必须与触发文本位于同一父容器（
.div1）下，且为.div1的直系子元素，否则:has()无法跨层级匹配。 - 建议为
.hide1/.hide2添加transition属性，使显隐切换更平滑自然。 -
<img src="NULL" alt="如何纯 CSS 实现段落内多区域悬停显示对应隐藏内容" >不合法，已替换为内联 SVG 占位图（实际使用时请替换为有效路径）。
此方案完全脱离 JavaScript，语义清晰、结构可控，是现代 CSS 解决“上下文感知式悬停”的标准实践。
