实现卡片内视频hover播放并添加覆盖层的技术求助

问题出在你添加的覆盖层会完全遮挡住下方的video元素，导致鼠标事件无法触发到video上，自然hover播放就失效了。给你两个简单的解决思路：

方案1：让覆盖层不拦截鼠标事件 #

给.overlay添加pointer-events: none;样式，这样鼠标事件会直接穿透覆盖层，落到下面的video上，不影响原有逻辑。

修改后的CSS和HTML：

.project {
    position: relative;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    filter: grayscale(1);
}

.project:hover {
    filter: grayscale(0);
}

.project video {
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.project .project-name {
    color: #ffffff;
    position: absolute;
    bottom: 10rem;
    left: 50px;
    font-weight: 400;
    font-size: 36px;
    line-height: 36px;
    font-family: 'Roboto';
    text-transform: uppercase;
    z-index: 5;
}

/* 添加覆盖层样式 */
.project .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3); /* 示例半透明黑色，可按需调整 */
    pointer-events: none; /* 关键：不拦截鼠标事件 */
    z-index: 2; /* 确保在video上方、project-name下方 */
}

<a href="" class="project">
    <video class="clip videoplay" preload="none" muted height="300px" width="500px" loop outline="none"
        poster="image.jpg">
        <source src="../videos/cl.mp4" type="video/mp4">
        Your browser does not support mp4 videos, change browser!
    </video>
    <div class="project-name">Sample Name</div>
    <div class="overlay"></div> <!-- 取消注释启用覆盖层 -->
</a>

JS代码无需修改，保持原有逻辑即可。

方案2：把hover事件绑定到父容器 #

如果覆盖层需要保留交互能力（比如点击事件），方案1就不适用了。这时候可以把鼠标事件绑定到整个.project容器上，不管鼠标移到容器内的哪个元素（包括覆盖层），都能触发视频的播放/暂停。

修改后的JS：

const projects = document.querySelectorAll('.project');

for (let i = 0; i < projects.length; i++) {
    const clip = projects[i].querySelector('.clip');
    projects[i].addEventListener('mouseover', function() {
        clip.play();
    });

    projects[i].addEventListener('mouseleave', function() {
        clip.pause();
    });
}

CSS里的.overlay正常设置定位和样式即可，无需加pointer-events: none;：

.project .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 2;
}

HTML同样取消overlay的注释即可。

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