CSS实现悬停触发：利用相邻兄弟选择器和Flexbox控制元素显示

<div class="myDIV">触发悬停</div>
<div class="some-other-div">不相关的div</div>
<div class="hide">要显示的内容</div>

.myDIV:hover + .hide {
  display: block; /* 期望显示，但不会生效 */
}

<section id="welcome_cryptonic_06">
  <div class="container">
    <div class="vision-container">
      <div class="lower-container">
        <!-- 触发悬停的元素，放在前面 -->
        <div class="right-para-container" id='main'>
          <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 class="left-logo-container" id='show'>
          <img src="https://images.unsplash.com/photo-1655833266283-af4002bf9ebb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
    </div>
  </div>
</section>

.lower-container {
  display: flex; /* 启用Flexbox布局 */
  flex-wrap: wrap; /* 允许项目换行 */
  padding: 5rem;
  height: 20%; /* 示例高度，可根据需要调整 */
}

.left-logo-container {
  order: 2; /* 在视觉上将此元素排在第二个，即使在HTML中它在第二个 */
  height: 20rem !important; /* 确保图片容器有足够高度 */
  padding: 2rem;
  flex: 1; /* 占据可用空间 */
  min-width: 250px; /* 最小宽度，防止过小 */
}
.left-logo-container img {
  height: 100%; /* 图片高度填充容器 */
  width: auto; /* 宽度自适应，保持比例 */
  object-fit: contain; /* 确保图片完整显示 */
}

.right-para-container {
  order: 1; /* 在视觉上将此元素排在第一个 */
  height: 25%; /* 示例高度 */
  color: black;
  width: 50%; /* 占据父容器一半宽度 */
  text-align: left;
  font-family: oh-whale; /* 示例字体 */
  padding: 5rem;
  flex: 1; /* 占据可用空间 */
  min-width: 300px; /* 最小宽度 */
}

.right-para-container p {
  border: 2px solid grey;
  border-radius: 2rem;
  padding: 2rem;
}

/* 初始隐藏图片容器 */
#show {
  display: none;
}

/* 当鼠标悬停在 #main 上时，紧随其后的 #show 显示 */
#main:hover + #show {
  display: block;
}

<section id="welcome_cryptonic_06">
  <div class="container">
    <div class="vision-container">
      <div class="lower-container">
        <div class="right-para-container" id='main'>
          <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 class="left-logo-container" id='show'>
          <img src="https://images.unsplash.com/photo-1655833266283-af4002bf9ebb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
        </div>
      </div>
    </div>
  </div>
</section>

.lower-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5rem;
  /* height: 20%; */ /* 移除固定高度，让内容撑开 */
  align-items: flex-start; /* 顶部对齐 */
}

.left-logo-container {
  order: 2;
  /* height: 20rem !important; */ /* 移除固定高度，让图片自然撑开 */
  padding: 2rem;
  flex: 1;
  min-width: 250px;
  box-sizing: border-box; /* 包含padding和border在宽度内 */
  text-align: center; /* 图片居中 */
}
.left-logo-container img {
  max-height: 20rem; /* 最大高度 */
  width: auto;
  object-fit: contain;
}

.right-para-container {
  order: 1;
  /* height: 25%; */ /* 移除固定高度 */
  color: black;
  width: 50%;
  text-align: left;
  font-family: 'oh-whale', sans-serif; /* 确保字体存在或提供备用 */
  padding: 5rem;
  flex: 1;
  min-width: 300px;
  box-sizing: border-box;
}

.right-para-container p {
  border: 2px solid grey;
  border-radius: 2rem;
  padding: 2rem;
}

#show {
  display: none;
}

#main:hover + #show {
  display: block;
}