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

<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; /* 文本在叠加层之上 */ }

MarketingBlocks AI

AI营销助理，快速创建所有的营销物料。

27

查看详情

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; // 可选：重置视频到开头         }     ); });