纯CSS实现ul悬停时显示另一div中p元素的方法求助

嘿，我太懂你这种头疼的感觉了——纯CSS里确实没有父选择器，这在需要跨DOM分支触发样式的时候简直是个硬伤！你尝试的#infoDrop > li:hover ~ #aboutPara > p选择器没生效，核心原因是**#aboutPara并不是你悬停的li的同级兄弟元素**，它在另一个独立的div里，而CSS的通用兄弟选择器~只能选择和当前元素同层级、且在它之后的元素，根本跨不过父元素这道坎。

下面给你两个可行的解决方案，看你更倾向哪种：

方案一：调整DOM结构，用纯CSS实现 #

如果能稍微调整一下HTML结构，让触发元素（#infoDrop）和目标元素（#aboutPara）变成同级兄弟，那纯CSS就能搞定。比如把它们放到同一个父容器里，并且让#aboutPara在#infoDrop之后：

<div class="hover-container">
  <ul id="infoDrop">
    <li>悬停我显示段落</li>
    <!-- 其他列表项 -->
  </ul>
  <div id="aboutPara">
    <p>这是要显示的文本内容</p>
  </div>
</div>

对应的CSS：

/* 默认隐藏段落 */
#aboutPara p {
  display: none;
}
/* 悬停ul时显示对应的段落 */
#infoDrop:hover ~ #aboutPara p {
  display: inline;
}

如果是要单个li悬停触发，可以给每个li和对应的段落设置关联标识（比如data属性），再调整结构让段落和li同级，不过这种情况结构会稍显繁琐，但依然能纯CSS实现。

方案二：用少量JavaScript辅助（不改动DOM结构） #

如果不想调整现有的DOM结构，那只能借助一点点JS来监听鼠标事件，手动控制段落的显示隐藏：

// 获取所有列表项和目标段落
const listItems = document.querySelectorAll('#infoDrop li');
const targetPara = document.querySelector('#aboutPara p');

// 给每个li添加悬停事件
listItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    targetPara.style.display = 'inline';
  });
  item.addEventListener('mouseout', () => {
    targetPara.style.display = 'none';
  });
});

这个方法不需要改任何HTML结构，只需要几行JS就能实现你要的效果，兼容性也很好。

总结一下：纯CSS的选择器只能在同一个DOM分支内通过后代、兄弟关系选择元素，跨分支的触发逻辑确实做不到，要么调整结构适配CSS，要么用JS补全这个缺口~

内容的提问来源于stack exchange，提问作者Ja-oon Solo