如何在鼠标悬停时绕过z-index触发函数并实现覆盖层透明度变化？

核心思路 #

把鼠标交互事件绑定到父容器<li class="Card">上，规避子元素层级遮挡导致的事件失效问题；用CSS伪类:hover实现overlay的透明度切换，无需额外JS逻辑。

步骤1：调整HTML，将事件绑定到父容器 #

把原本绑定在video上的onmouseover和onmouseout移到<li>上，通过选择器定位内部video：

<div id="SolutionCards">
    <ul class="Cards">
        <li class="Card" 
            onmouseover="this.querySelector('video').play();"
            onmouseout="const vid = this.querySelector('video'); vid.pause(); vid.currentTime=0;">
            <div class="cardOverlayText"> Sea Freight </div>
            <div class="cardOverlay"></div>
            <video width="200" height="300" muted loop id="seaCardVideo">
                <source src="video assets/sea card video_Trim.mp4" type="video/mp4">
            </video>
        </li>
        <!-- 其余4个li结构完全一致 -->
    </ul>
</div>

步骤2：用CSS实现层级控制与透明度切换 #

给父容器设置相对定位，内部三个元素设为绝对定位，通过z-index明确层级；利用:hover伪类修改overlay的透明度：

.Card {
    position: relative;
    width: 200px;
    height: 300px;
    list-style: none;
    overflow: hidden; /* 防止视频或内容溢出容器 */
}

.Card video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证视频铺满容器 */
    z-index: 1; /* 最底层 */
}

.cardOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5; /* 初始50%透明度 */
    z-index: 2; /* 中间层 */
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

.Card:hover .cardOverlay {
    opacity: 0.8; /* 悬停时的透明度，可自行调整数值 */
}

.cardOverlayText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 文本居中 */
    color: white;
    font-size: 1.2rem;
    z-index: 3; /* 最上层保证文本可见 */
}

关键说明 #

1. 父容器绑定事件：不管鼠标悬停在文本、overlay还是video上，都会触发父容器的鼠标事件，彻底解决层级遮挡导致的video事件失效问题。
2. CSS过渡效果：通过transition属性让overlay的透明度变化更平滑，提升交互体验。
3. 层级定位：利用position: relative/absolute配合z-index明确三个元素的层级关系，确保文本显示在最上层的同时不影响交互逻辑。

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