在交互式卡片中实现鼠标悬停播放视频及叠加层效果

<a href="/your-project-detail-page" class="project">
    <!-- 视频元素 -->
    <video class="clip videoplay" preload="none" muted loop poster="path/to/your/image.jpg">
        <source src="path/to/your/video.mp4" type="video/mp4">
        您的浏览器不支持MP4视频，请尝试更换浏览器！
    </video>

    <!-- 叠加层内容：项目名称 -->
    <div class="project-name">
        精彩项目标题
    </div>

    <!-- 可选：完整的透明叠加层，用于统一视觉效果或捕获事件 -->
    <!-- <div class="overlay"></div> -->
</a>

/* 卡片容器样式 */
.project {
    position: relative; /* 关键：为内部绝对定位元素提供参照 */
    display: block; /* 确保a标签占据完整空间 */
    width: 300px; /* 示例宽度 */
    height: 200px; /* 示例高度 */
    overflow: hidden; /* 隐藏超出卡片范围的内容 */
    background-color: #333; /* 默认背景，以防视频加载失败 */
    filter: grayscale(1); /* 默认灰度效果 */
    transition: filter 0.3s ease; /* 悬停效果过渡 */
    text-decoration: none; /* 移除a标签下划线 */
    color: inherit; /* 继承文本颜色 */
}

/* 鼠标悬停时移除灰度 */
.project:hover {
    filter: grayscale(0);
}

/* 视频元素样式 */
.project video {
    position: absolute; /* 关键：相对于父容器定位 */
    top: 0;
    left: 0;
    width: 100%; /* 填充父容器 */
    height: 100%; /* 填充父容器 */
    object-fit: cover; /* 裁剪视频以填充容器，保持比例 */
    z-index: 1; /* 确保视频在卡片背景之上，但在叠加层之下 */
    pointer-events: none; /* 关键：防止视频本身捕获鼠标事件，确保事件能冒泡到父元素 */
}

/* 叠加层内容样式 (例如 project-name) */
.project .project-name {
    position: absolute; /* 关键：相对于父容器定位 */
    bottom: 1rem; /* 距离底部 */
    left: 1rem; /* 距离左侧 */
    right: 1rem; /* 距离右侧，实现左右对齐 */
    color: #ffffff;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.2;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    z-index: 5; /* 关键：确保在视频和可能的半透明叠加层之上 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* 增加可读性 */
}

/* 如果需要一个覆盖整个视频的半透明叠加层 */
.project .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色 */
    z-index: 2; /* 在视频之上，在 project-name 之下 */
    transition: background-color 0.3s ease;
}

/* 鼠标悬停时，叠加层可能变淡或消失 */
.project:hover .overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

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

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

        if (video) { // 确保