无需JS：悬停段落不同区域显示隐藏div的实现问题

问题根源 #

你原代码里的+相邻兄弟选择器无法生效，核心原因是：.txt1、.txt2是<p class="show">的子元素，而.hide1、.hide2是<p>的同级元素——+只能匹配紧接在当前元素之后的同级元素，跨层级的关联它做不到。

解决方案（无需JavaScript） #

利用CSS的:has()选择器（主流现代浏览器已支持），可以轻松实现父元素对子元素hover状态的感知，进而控制同级的隐藏区块显示。

修改后的完整代码

CSS部分

body {
    background-color: #eee;
}
.div1 {
    padding: 50px 0 60px 0;
    margin: auto;
    position: relative;
    text-align: center;
}
.show {
    padding: 0 0 15px 0;
    margin: 0;
}
/* 统一隐藏区块的初始状态，用visibility+opacity实现平滑过渡 */
.hide1, .hide2 {
    visibility: hidden;
    opacity: 0;
    background-color: #eee;
    border: 1px #666 solid;
    transition: all 0.3s ease;
}
.txt1, .txt2 {
    font-weight: bold;
    color:#bc2f00;
    cursor: pointer;
}
/* 当.div1下的.txt1被hover时，显示对应的.hide1 */
.div1:has(.txt1:hover) .hide1 {
    visibility: visible;
    opacity: 1;
}
/* 同理控制.hide2的显示 */
.div1:has(.txt2:hover) .hide2 {
    visibility: visible;
    opacity: 1;
}

HTML部分（无需大幅修改）

<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="NULL" alt="test"></td>
          <td><a href="">Hidden Text 1&gt;</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="NULL" 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>
<!-- there will be a form here -->
</div>

补充说明 #

1. 用visibility替代display:none是为了支持过渡动画，让显示/隐藏更平滑；如果不需要动画，也可以换回display:block/none。
2. :has()选择器目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容更老的浏览器，可以考虑将隐藏区块用绝对定位嵌套到文本附近（注意<span>不能包含<div>，可改用<span>包裹内联元素），但这种方式会增加结构复杂度，优先推荐:has()方案。

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