Light box hover效果异常求助：如何实现图片完整环绕高亮？

嘿，我来帮你搞定这个hover高亮的问题！从你给出的代码片段来看，问题主要出在定位规则、inline-block的默认行为以及高亮层的尺寸设置上，下面一步步给你分析和修正：

可能的问题根源 #

1. 父容器未设置相对定位：如果你的高亮层（.img_i）是绝对定位的，它的父元素（.planet2）没有position: relative的话，高亮层会相对于更上层的定位元素（比如#planet）来定位，导致尺寸和位置偏移，只覆盖图片一半。
2. inline-block的默认垂直对齐：inline-block元素默认是vertical-align: baseline，这会让元素底部产生额外空隙，导致父容器高度比图片高，高亮层的高度计算出错。
3. 图片的inline特性：图片默认是inline元素，底部会有几像素的空白，同样会让父容器高度异常，影响高亮层的覆盖范围。
4. 高亮层未铺满父容器：如果.img_i的宽高没有设置成和图片/父容器一致，或者没有用定位属性强制铺满，就会出现部分覆盖的情况。

修正后的完整代码示例 #

/* 外层容器（保持你的原有设置，可根据实际调整） */
#planet {
  background-repeat: no-repeat;
  height: 350px;
  margin: 2px;
  position: relative;
  width: 679px;
  /* 可选：如果子元素超出容器，添加overflow: auto; 避免截断 */
  overflow: auto;
}

/* 图片列表项 - 关键修改 */
.planet2 {
  display: inline-block;
  text-align: center;
  margin: 2px;
  position: relative; /* 必须：让高亮层基于此定位 */
  vertical-align: top; /* 解决inline-block的垂直对齐空隙 */
}

/* 图片样式 - 消除底部空白 */
.planet2 img {
  display: block; /* 把图片改成block元素，去掉inline默认的底部空白 */
  width: 100%; /* 可选：让图片自适应容器宽度，保证显示完整 */
  height: auto;
}

/* 高亮层样式 - 强制铺满父容器 */
.planet2 .img_i {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* 四个方向都设为0，完全铺满父容器 */
  background-color: rgba(255, 255, 255, 0.4); /* 高亮效果，可调整颜色和透明度 */
  opacity: 0; /* 默认隐藏高亮层 */
  transition: opacity 0.3s ease; /* 平滑过渡动画 */
}

/* hover时显示高亮层 */
.planet2:hover .img_i {
  opacity: 1;
}

关键修改说明 #

• 给.planet2加position: relative：让绝对定位的.img_i以这个列表项为参考，确保高亮层精准覆盖在图片上方。
• vertical-align: top：彻底解决inline-block元素之间的垂直空隙，保证父容器高度和图片高度完全一致。
• 图片设为display: block：消除inline图片自带的底部空白，避免父容器高度异常。
• 高亮层用top/left/right/bottom: 0：强制高亮层铺满整个列表项容器，也就是完全覆盖图片，不会出现半覆盖的情况。

按照这个修改后，hover高亮就会完整环绕图片啦！

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