悬停右侧div显示左侧div图片的CSS实现问题排查

代码未达预期有3个核心错误：

• 类绑定错误：控制显隐的.hide类被加在了右侧段落容器上，默认会把需要常驻显示的文本整块隐藏，而你真正需要默认隐藏的是左侧容器内的图片
• 触发源错误：你把hover事件绑定在了左侧的.myDIV元素上，和「悬停右侧div触发显示」的需求完全相反
• 选择器逻辑错误：相邻兄弟选择器+只能选中当前元素后面紧邻的同级元素，CSS没有原生的前序兄弟选择器，无法直接通过右侧div的hover状态选中DOM顺序在前的左侧div内容

不需要大幅改动代码，仅调整类位置和CSS选择器即可，现代浏览器全兼容：

1. 移除右侧.right-para-container上的hide类，将hide类添加到左侧容器内的<img>标签上，实现默认隐藏图片的效果
2. 删除原代码中无效的.myDIV:hover + .hide规则，使用:has()伪类检测父容器下右侧div的hover状态，控制左侧图片显示
3. 可删除左侧容器上无用的myDIV类

修正后的完整CSS代码：

.lower-container {
  padding: 10px;
  width: 100%;
  text-align: center;
  margin-bottom: -70px;
}

.left-logo-container {
  width: 40%;
  float: left;
  padding: 10px;
  padding-top: 0 !important;
}

.left-logo-container img {
  width: 250px;
  padding-bottom: 50px;
}

.right-para-container {
  width: 60%;
  float: right;
  padding: 10px;
  margin-top: -200px;
}

.right-para-container p {
  color: white;
  text-align: left;
  padding-left: 0;
  padding-right: 120px;
  font-family: oh-whale;
}

.clear:after {
  clear: both;
  content: "";
  display: table;
}

/* 修正后的显隐逻辑 */
.hide {
  display: none;
}
/* 父容器检测到右侧段落被hover时，显示左侧图片 */
.lower-container:has(.right-para-container:hover) .hide {
  display: block;
}

修正后的核心HTML结构：

<section id="welcome_cryptonic_06">
  <div class="container">
    <div class="vision-container">
      <div class="title-container"></div>
      <div class="lower-container">
        <div class="left-logo-container">
          <!-- hide类移至图片标签，默认隐藏图片 -->
          <img src="about_image.png" class="hide">
        </div>
        <div class="right-para-container">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores provident ipsum veritatis quod eveniet aperiam ipsa voluptatibus mollitia deserunt eos itaque assumenda omnis nam animi consequuntur voluptate, placeat velit repudiandae. Lorem, ipsum dolor
            sit amet consectetur adipisicing elit. Fugiat, veritatis? Iure dolor consequatur possimus ipsum tenetur quos tempora animi numquam inventore. Pariatur doloremque ut deleniti fugiat enim, laudantium culpa sit.
          </p>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
  </div>
</section>
<!-- End welcome_cryptonic -->

老旧浏览器兼容方案 #

如果需要兼容IE9等不支持:has()伪类的浏览器，不需要改CSS浮动属性，仅调换两个浮动div的DOM顺序（浮动元素的视觉位置只受float属性控制，和DOM顺序无关），再调整选择器即可：

1. 把右侧.right-para-container的DOM节点移到左侧.left-logo-container前面
2. 将显隐CSS规则替换为通用兄弟选择器写法，兼容到IE9：

.right-para-container:hover ~ .left-logo-container .hide {
  display: block;
}

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