创建交互式视频卡片：鼠标悬停播放与叠加层实现教程

<a href="your-target-page.html" class="project">
    <video class="clip videoplay" preload="none" muted loop poster="image.jpg">
        <source src="../videos/cl.mp4" type="video/mp4">
        您的浏览器不支持MP4视频，请尝试更换浏览器！
    </video>
    <div class="overlay"></div> <!-- 视频叠加层 -->
    <div class="project-name">示例项目名称</div> <!-- 文本叠加层 -->
</a>

.project {
    position: relative; /* 关键：使子元素的绝对定位生效 */
    display: block; /* 确保a标签占据完整空间 */
    width: 500px; /* 示例宽度 */
    height: 300px; /* 示例高度 */
    overflow: hidden; /* 隐藏超出卡片范围的内容 */
    background-color: #333; /* 备用背景色 */
    filter: grayscale(1); /* 默认灰度效果 */
    transition: filter 0.3s ease-in-out; /* 灰度过渡效果 */
}

.project:hover {
    filter: grayscale(0); /* 鼠标悬停时恢复彩色 */
}

.project video {
    position: absolute; /* 视频绝对定位 */
    top: 0;
    left: 0;
    width: 100%; /* 视频填充整个卡片 */
    height: 100%;
    object-fit: cover; /* 保持视频宽高比并填充容器 */
    z-index: 1; /* 视频在最底层 */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    z-index: 2; /* 叠加层在视频之上 */
    transition: background-color 0.3s ease-in-out;
}

/* 可选：鼠标悬停时叠加层变透明 */
.project:hover .overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

.project .project-name {
    color: #ffffff;
    position: absolute;
    bottom: 20px; /* 调整文本位置 */
    left: 20px;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    z-index: 3; /* 文本在叠加层之上 */
}

document.addEventListener('DOMContentLoaded', function() {
    const projectCards = document.querySelectorAll('.project');

    projectCards.forEach(card => {
        const video = card.querySelector('.clip'); // 获取卡片内的视频元素

        if (video) { // 确保视频元素存在
            card.addEventListener('mouseover', function() {
                video.play();
            });

            card.addEventListener('mouseleave', function() {
                video.pause();
                video.currentTime = 0; // 可选：鼠标移开时将视频重置到开头
            });
        }
    });
});

$(document).ready(function() {
    // 为所有 .project 元素绑定 hover 事件
    $(".project").hover(
        function() { // mouseover 回调函数
            // 在当前悬停的 .project 元素内查找 video 标签，并获取其原生DOM元素进行播放
            $(this).find('video').get(0).play();
        },
        function() { // mouseleave 回调函数
            // 在当前悬停的 .project 元素内查找 video 标签，并获取其原生DOM元素进行暂停
            $(this).find('video').get(0).pause();
            $(this).find('video').get(0).currentTime = 0; // 可选：重置视频到开头
        }
    );
});