Squarespace中HTML/CSS实现的Hover效果异常问题求助

问题原因分析 #

你遇到的问题核心来自三个点：

• 给overlay设置了固定height:500px，如果图片实际高度不等于这个值，hover触发区域就只会局限在固定高度范围内
• HTML里存在多余的闭合标签</p>，可能干扰布局渲染
• 图片默认是inline元素，底部会留有空白，导致容器高度和图片实际高度不匹配，hover范围被压缩

修复后的代码 #

CSS部分

.img-container {
  position: relative;
  display: inline-block; /* 确保容器完全包裹图片 */
  z-index: 2;
}

.img-container img {
  width: 100%; /* 让图片填满容器 */
  display: block; /* 消除inline元素的底部空白 */
  border-radius: 50px; /* 和overlay保持一致的圆角 */
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background-color: #101440;
  opacity: 0.8;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  z-index: 3; /* 确保overlay在图片上方 */
}

.img-container:hover .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML部分

<div class="img-container">
  <img src="https://images.squarespace-cdn.com/content/v1/63b5…516bb941/shutterstock_1603765507.jpg?format=1000w" alt="">
  <div class="overlay">
    <p style="font-size: 0.8em; padding: 0 20px;">text goes here</p>
  </div>
</div>

额外说明 #

1. 移除了overlay的固定高度，用top:0; bottom:0自动撑满容器，不管图片实际高度多少都能完全覆盖
2. 给图片添加display:block和width:100%，确保容器高度和图片一致，hover区域覆盖整张图片
3. 调整overlay的z-index为3，避免被图片遮挡
4. 修正了HTML里多余的</p>标签，保证语法正确
5. 给图片加上和overlay一致的border-radius，避免圆角不匹配的问题

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