CSS过渡与溢出问题求助：鼠标悬停显示图片异常

问题修复说明 #

1. 图片溢出问题：给图片显示盒子设置固定宽高+overflow:hidden，用背景图方式加载图片并适配容器，避免超出范围；
2. 标题横向排列：用flex布局包裹标题元素，取消不合理的强制偏移，通过间距控制排列；
3. 过渡效果实现：用visibility和opacity替代display:none控制显示隐藏，配合过渡属性实现平滑效果。

修复后的完整代码 #

HTML代码

<div class="PAstaff">
  <!-- 标题容器：flex布局实现横向排列 -->
  <div class="titles-container">
    <a class="imginfo staff-item staff-1">
      <div class="LKSstaff">
        <b>STAFF1</b>
      </div>
    </a>
    <a class="imginfo staff-item staff-2">
      <div class="LKSstaff">
        <b>STAFF2</b>
      </div>
    </a>
  </div>

  <!-- 图片显示区域：固定尺寸+overflow:hidden -->
  <div class="image-container">
    <!-- 基础背景图 -->
    <div class="BGstaff"></div>
    <!-- 悬停显示的图片容器 -->
    <div class="hover-image-box"></div>
  </div>
</div>

CSS代码

.PAstaff {
  width: 560px;
  height: 300px;
  background: red;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
}

/* 标题容器：横向排列两个标题 */
.titles-container {
  display: flex;
  gap: 15px; /* 标题之间的间距 */
}

.staff-item {
  color: #949494;
  text-align: center;
  font-size: 16px;
  padding: 5px;
  width: 120px;
}

.LKSstaff {
  color: #949494;
  text-align: center;
  font-size: 16px;
  background: black;
  padding: 5px;
  width: 120px;
  height: 25px;
  cursor: pointer;
}

/* 图片显示区域 */
.image-container {
  position: relative;
  width: 250px;
  height: 280px;
  margin-left: auto; /* 靠右对齐 */
}

.BGstaff {
  width: 100%;
  height: 100%;
  background: url(https://i.imgur.com/ZNxezg5.png) center/cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 悬停图片盒子：控制溢出+过渡效果 */
.hover-image-box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 悬停时显示对应图片 */
.staff-1:hover ~ .image-container .hover-image-box {
  visibility: visible;
  opacity: 1;
  background: url(https://i.imgur.com/Q4UL0Pm.png) center/cover;
}

.staff-2:hover ~ .image-container .hover-image-box {
  visibility: visible;
  opacity: 1;
  background: url(https://i.imgur.com/vfV96UV.png) center/cover;
}

关键修复点拆解 #

• 图片溢出解决：hover-image-box继承父容器250px宽高，添加overflow:hidden；用background加载图片并设置center/cover，自动适配容器尺寸，不会超出范围。
• 标题横向排列：titles-container使用display:flex布局，取消原代码中margin-left:300px这类强制偏移，用gap控制标题间距，布局更合理。
• 过渡效果实现：放弃display:none，改用visibility:hidden+opacity:0作为初始状态，悬停时切换为visibility:visible+opacity:1，配合transition:opacity 0.4s ease实现平滑过渡。

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