CSS如何实现hover左容器元素时控制另一容器内元素显隐

你遇到的限制是CSS选择器的天然规则，确实无法直接从一个父容器内的子元素，选中另一个独立父容器内的元素。下面给两种可行方案，都完全保留你原来的左右25%/74%并排布局不改动：

方案1：纯CSS实现（主流浏览器兼容） #

只需要两步修改，不用写JS：

步骤1：修改HTML结构，给两个容器加共同父级 #

只需要在外层套一个div，原有布局代码完全不用动：

<!-- 新增共同父容器 -->
<div class="wrapper">
  <div class="left-container">
    <!-- 你原来的left-container里的所有内容原封不动 -->
    <ul>
      <div class="project1">
        <li>Project 1</li>
      </div>
      <div class="project2">
        <li>Project 2</li>
      </div>
      <div class="project3">
        <li>Project 3</li>
      </div>
      <div class="project4">
        <li>Project 4</li>
      </div>
    </ul>
  </div>
  <div class="right-container">
    <!-- 你原来的right-container里的所有内容原封不动 -->
    <div class="right-text1" style="background-color: tomato;">
      Information about Project 1
    </div>
    <div class="right-text2" style="background-color: teal;">
      Information about Project 2
    </div>
    <div class="right-text3" style="background-color: green;">
      Information about Project 3
    </div>
    <div class="right-text4" style="background-color: yellow;">
      Information about Project 4
    </div>
  </div>
</div>

步骤2：新增CSS代码 #

在你原有CSS的最后加下面的代码即可：

/* 首先默认隐藏所有右侧文本块，如果需要默认显示第一个可以单独给.right-text1加display: block */
.right-text1, .right-text2, .right-text3, .right-text4 {
  display: none;
}

/* 当wrapper里的对应project被hover时，显示对应右侧文本 */
.wrapper:has(.project1:hover) .right-text1,
.wrapper:has(.project2:hover) .right-text2,
.wrapper:has(.project3:hover) .right-text3,
.wrapper:has(.project4:hover) .right-text4 {
  display: block;
}

这个方案用了CSS的:has()选择器，现在Chrome、Edge、Firefox、Safari的新版本都支持，完全不会改动你原有布局的浮动、宽度规则。

方案2：极简JS实现（兼容所有新旧浏览器） #

如果需要兼容非常老的浏览器，不用改HTML和原有CSS，直接在HTML最后加几行JS代码就行：

<!-- 放在</body>标签前面即可 -->
<script>
// 先把所有右侧文本块默认隐藏
const rightTexts = document.querySelectorAll('[class^="right-text"]');
rightTexts.forEach(text => text.style.display = 'none');

// 给每个project绑定hover事件
document.querySelectorAll('[class^="project"]').forEach((project, index) => {
  // 鼠标移入时显示对应右侧文本
  project.addEventListener('mouseover', () => {
    rightTexts.forEach(text => text.style.display = 'none');
    rightTexts[index].style.display = 'block';
  });
  // 鼠标移出后的逻辑，不需要隐藏就注释掉下面三行
  project.addEventListener('mouseout', () => {
    rightTexts.forEach(text => text.style.display = 'none');
  });
});
</script>

内容的提问来源于stack exchange，提问作者Jackomo The Fugitive