悬停下方.box时上方.box的overlay被触发的问题排查

问题描述 #

想要实现：鼠标悬停每个.box元素时，对应元素的overlay显示在图片上方。
实际异常：悬停位于上方元素下方的.box图片元素时，上方元素的hover事件被触发，无法实现“每个元素悬停仅显示自身overlay”的预期。

原因分析 #

.overlay使用了position:absolute，但它的父元素.box没有设置position:relative，导致overlay的定位基准是最近的有定位的祖先元素#moviebox（该元素设置了position:relative）。所有overlay都基于同一个容器定位，hover事件的触发范围出现混乱，从而引发错误触发的问题。

解决方案 #

1. 给.box添加position:relative，让每个overlay的定位基准改为自身所在的.box容器
2. 调整overlay的top值为0（相对于.box定位，无需再使用负百分比）
3. 修改overlay的宽度为自适应.box的宽度，避免固定宽度导致的适配问题
4. 简化transition属性的写法，让动画更简洁

修改后的完整CSS代码 #

.main{
    border: 2px solid magenta;
    background-color: #bebdbd;
    position: absolute;
    width: 30vw;
    display:grid;
    flex-direction: column;
}

*{
    margin: 0;
    padding: 0;
}
.box{
    overflow: hidden;
    position: relative; /* 新增：让子元素absolute基于当前box定位 */
}
.box img{
    width: 200px;
    border-radius: 4px;
}

.main .box:hover .overlay{
    height: 100px;
    z-index: 999;
    top: 0; /* 调整：相对于box定位，从0.5%改为0 */
    transition: height 300ms linear; /* 简化transition写法 */
}

.overlay{
    position: absolute;
    top: 0; /* 调整：相对于box定位，从-11%改为0 */
    background-color: #ffffff4e;
    width: calc(100% - 10px); /* 调整：自适应box宽度，减去左右padding的5px */
    height: 0px;
    overflow: hidden;
    padding: 5px;
    backdrop-filter: blur(16px);
}

#moviebox{
    position: relative;
    height: fit-content;
    width: 100%;
    display: flex;
    gap: 1rem;
    overflow: hidden;
    flex-wrap: wrap;
    padding: 5px;
}

#search{
    border: none;
    margin: 5vh 0vw 5vh 4vw;
    height: 5vh;
    width: 30vw;
    border-radius: 3px;
    padding-left: 2%;
    background-color: #949292;
    color: white;
    outline: none;
    font-size: 23px;
}

效果说明 #

修改后，每个.box成为独立的定位容器，overlay仅属于当前.box，鼠标悬停时只会触发当前元素的hover事件，overlay会正确显示在对应图片的上方，不会再错误触发其他元素的hover效果。

内容的提问来源于stack exchange，提问作者Uday Pratap Chauhan