鼠标悬停图片时显示两个元素的实现及布局修复问题

问题描述 #

核心需求是实现鼠标悬停图片时显示指定元素，当前存在两个问题：

• 悬停时蓝色div占据空间超过两列的一半，推测是静态状态下元素占用空间导致；
• 尽管容器div设置了align-items:center，span仍未在蓝色div内水平居中。

修正后的代码 #

CSS 代码 #

.main {
  margin: 50px;
  width: 100%;
  height: 800px;
  background-color: red;
}

.wrapper {
  margin: 15px;
}

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 15px;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  gap: 15px;
}

.rollover {
  background-color: white;
  position: relative;
}

.layer {
  font-family: Georgia;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.rollover:hover .layer {
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
}

.layer span {
  display: none;
  color: white;
  font-size: 36px;
  z-index: 100;
}

.rollover:hover .layer span {
  display: inline-block;
}

.rollover:hover img {
  opacity: 0;
}

HTML 代码 #

<body>
  <div class="main"></div>
  <div class="wrapper">
    <div class="row">
      <div class="column rollover">
        <div class="layer">
          <img src="https://img.creator-prod.zmags.com/assets/images/648afc28b6fc7c5ba75cf2ab.jpeg?im=Resize,width=768">
          <span>The Alex</span>
        </div>
      </div>
      <div class="column">
        <img src="https://img.creator-prod.zmags.com/assets/images/648afc28b6fc7c5ba75cf2ab.jpeg?im=Resize,width=768">
      </div>
    </div>
  </div>
</body>

关键修复点 #

1. 解决蓝色div超宽问题

   • 给.rollover添加position:relative，让悬停时的蓝色.layer通过position:absolute覆盖整个列，避免原有内容布局导致宽度溢出；
   • 将visibility:hidden改为opacity:0，彻底释放图片占用的空间，避免影响列的尺寸稳定性。

2. 解决span不居中问题

   • 调整span的触发条件为.rollover:hover .layer span，确保鼠标悬停在整个列区域时就显示span；
   • 将span的display:inline改为display:inline-block，让flex容器的justify-content和align-items属性对其生效，实现水平垂直居中。

内容的提问来源于stack exchange，提问作者Jing Liang