z-index值最大时Hover事件失效问题排查与解决求助

我有一个带图片的gallery组件项，需求如下：

• 鼠标悬停在gallery项上时，在主体区域中心显示MORE链接（此功能已正常工作）
• 鼠标悬停在MORE链接上时，链接透明度变为0.5

尽管MORE链接的z-index值设置得极大，但其:hover事件始终无法触发，cursor: pointer也不生效，求解决思路。

相关代码 #

HTML #

<div class="gallery _flex-between">
    <div class="gallery__item gallery-item _flex-column-center">
        <a href="/project/everlastingSummer" class="gallery-item__link"></a>
        <div class="gallery-item__body">
            <div class="gallery-item__more-container">
                <a class="gallery-item-more">More &#8594;</a>
            </div>
            <img src="/resources/projects/1.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery-item__footer">
            Everlasting Summer
        </div>
    </div>
</div>

CSS #

._absolute-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.gallery {
    margin-top: 4em;
    width: 90%;
}
.gallery-item__footer {
    font-size: 1.6rem;
    margin-top: 1em;
    width: 100%;
    border: 1px solid black;
    text-align: center;
    border-radius: 35px;
    padding: .5em 0;
    letter-spacing: 2px;
    background-color: white;
    transition: background-color .3s, color .3s;
}
.gallery__item {
    position: relative;
    width: 30%;
    max-width: 600px;
}
.gallery-item__more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    transition: background-color .3s;
    border-radius: 35px;
    z-index: 2;
}
.gallery-item__link {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 4;
}
.gallery-item-more {
    position: relative;
    z-index: 1000000000;
    width: 50%;
    background-color: rgba(255, 255, 255, 1);
    opacity: 0;
    transition: background-color .3s;
    color: black;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 1em 0;
    border-radius: 35px;
    text-align: center;
    cursor: pointer;
}
.gallery-item-more:hover {
    background-color: rgba(255, 255, 255, .5);
}
.gallery-item__link:hover ~ .gallery-item__footer {
    background-color: black;
    color: white;
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item__more-container {
    background-color: rgba(0,0,0,0.8);
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item-more {
    opacity: 1;
}
.gallery-item__body {
    width: 100%;
    position: relative;
}
._flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery__img {
    object-position: top;
    height: 25vw;
    width: 100%;
    border-radius: 35px;
}

问题根源 #

.gallery-item__link是绝对定位元素，覆盖了整个.gallery__item区域，且z-index:4高于.gallery-item__more-container的z-index:2。尽管.gallery-item-more设置了极高的z-index，但它的父容器层级低于.gallery-item__link，导致鼠标事件被上层的.gallery-item__link完全拦截，根本无法触碰到MORE链接。

修复方案 #

方案1：调整事件触发源并允许鼠标穿透（推荐）

1. 将hover事件的触发源从.gallery-item__link改为父元素.gallery-item，替换原有的三个hover规则：

   .gallery-item:hover .gallery-item__footer {
       background-color: black;
       color: white;
   }
   .gallery-item:hover .gallery-item__body .gallery-item__more-container {
       background-color: rgba(0,0,0,0.8);
   }
   .gallery-item:hover .gallery-item__body .gallery-item-more {
       opacity: 1;
   }
   

2. 给.gallery-item__link添加pointer-events: none，让它不拦截鼠标事件，确保鼠标能穿透到下方的MORE链接：

   .gallery-item__link {
       position: absolute;
       width: 100%;
       height: 100%;
       cursor: default;
       z-index: 4;
       pointer-events: none;
   }
   

3. （可选）给MORE链接显式设置pointer-events: auto，确保它能正常响应鼠标事件：

   .gallery-item-more {
       /* 原有样式 */
       pointer-events: auto;
   }
   

方案2：调整z-index层级

直接降低.gallery-item__link的z-index，让它低于.gallery-item__more-container，使MORE链接所在容器处于上层：

.gallery-item__link {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 1; /* 从4改为1，低于more-container的z-index:2 */
}

注意：此方案会导致.gallery-item__link的跳转功能被MORE链接遮挡，点击时优先触发MORE链接事件，若需保留整个gallery项的跳转功能，优先选择方案1。

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