如何实现鼠标悬停div时显示背景遮罩与居中链接

• 背景溢出原因：内部链接设置了position: absolute和width: 100%，但父容器.boxItems_first没有设置定位属性，绝对定位元素会向上查找最近的已定位祖先元素，找不到时就相对整个页面根元素计算尺寸，直接导致宽度溢出容器。
• opacity使用问题：用opacity实现显隐本身是合理方案，配合transition可以实现平滑过渡，但你的代码存在两个疏漏：一是把transition属性写在了:hover状态下，鼠标移出时过渡效果会直接失效；二是opacity为0的元素依然会响应鼠标点击事件，隐藏状态下会遮挡其他元素、触发误触。
• 居中失败原因：你用bottom: 60%硬编码偏移值的方式根本无法实现自适应居中，同时链接作为行内元素，没有设置铺满容器的定位规则，自然无法在图片区域内双向居中。

CSS部分 #

.container_left {
    width: 20%;
}

.boxItems_first {
   position: relative; /* 作为内部绝对定位元素的参考容器 */
   display: flex;
   flex-direction: column;
   overflow: hidden; /* 截断溢出内容，防止背景跑出容器 */
}

.boxItems_first img {
    display: block; /* 消除行内元素默认底部缝隙 */
    height: 200px;
    width: auto;
    transition: opacity 0.3s ease; /* 过渡写在默认态，移入移出都生效 */
}

.boxItems_first a {
    position: absolute;
    inset: 0; /* 简写：top/left/right/bottom全为0，铺满整个父容器 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    opacity: 0;
    pointer-events: none; /* 隐藏状态下不响应点击，避免误触 */
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 8px;
    transition: opacity 0.3s ease; /* 过渡写在默认态 */
}

.boxItems_first:hover a {
    opacity: 1;
    pointer-events: auto; /* 显示时恢复点击响应 */
}

.boxItems_first:hover img {
    opacity: 0.3;
}

如果需要兼容极老旧浏览器，可以把inset: 0替换为top: 0; left: 0; right: 0; bottom: 0，效果完全一致。

HTML部分 #

<div class="container_left">
  <div class="boxItems_first">
     <a href="/shop/product" target="_blank">Product Page</a>
     <img height="200" src="https://c.wallhere.com/photos/e5/d3/vertical_animation_fantasy_art-1693403.jpg!d" class="attachment-full size-full" alt="产品图" loading="lazy">
  </div>   
</div>

• 容器修复：给.boxItems_first添加position: relative约束内部绝对定位元素的参考系，再加overflow: hidden做兜底，彻底解决背景溢出问题；给img添加display: block消除行内元素默认的底部3px缝隙，避免定位偏差。
• 显隐逻辑优化：保留opacity实现淡入淡出效果，补充pointer-events属性控制元素隐藏/显示状态下的点击响应，把transition属性移到元素默认样式上，保证鼠标移入、移出都有一致的平滑过渡。
• 居中方案替换：放弃硬编码偏移值的写法，让链接直接铺满整个图片容器，再用flex布局实现内部文字的水平+垂直居中，不需要手动计算偏移值，适配任意尺寸的图片容器。

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