CSS悬停单侧控制对立侧文本透明度仅单向生效问题求助

问题原因 #

你使用的CSS ~（通用兄弟选择器）只能选中当前元素之后的同级元素，无法选中它之前的元素。你的HTML结构里.left在.right前面，所以：

• .left:hover ~ .right p 能正常生效，因为.right在.left之后
• .right:hover ~ .left p 完全无效，因为.left在.right之前，~选择器找不到它

解决办法 #

方案1：使用CSS :has() 选择器（无需修改HTML结构）

:has() 是父选择器，可以检测容器内子元素的状态，目前主流浏览器都已支持。修改CSS如下：

/* 悬停左侧div时，右侧文本透明 */
.left:hover ~ .right p {
  opacity: 0;
}

/* 悬停右侧div时，左侧文本透明 */
.container:has(.right:hover) .left p {
  opacity: 0;
}

方案2：调整HTML结构+CSS布局（兼容旧浏览器）

如果需要兼容不支持:has()的旧浏览器，可以调整两个div的HTML顺序，再用flex布局的order属性保持视觉上的左右顺序：

修改后的HTML：

<div class="container">
  <div class="right">
    <p>This is right text.</p>
  </div>
  <div class="left">
    <p>This is left text.</p>
  </div>
</div>

修改后的CSS：

.container {
  display: flex;
}
/* 让left在视觉上显示在右侧div的前面 */
.left {
  order: -1;
  margin-right: auto; /* 保持左右分布，可根据需求调整间距 */
}

.right:hover ~ .left p {
  opacity: 0;
}
.left:hover ~ .right p {
  opacity: 0;
}

内容的提问来源于stack exchange，提问作者37 Years Ago