实现鼠标悬停文本触发背景视频播放的HTML/CSS/JS方案问询

HTML 结构 #

先搭建基础头部结构，包含触发悬停的文本元素和背景视频容器：

<header class="header">
  <div class="header-content">
    <span class="hover-trigger">digital</span>
    <!-- 可添加其他头部文本内容 -->
  </div>
  <video class="bg-video" loop muted playsinline>
    <source src="your-video.mp4" type="video/mp4">
    <!-- 可补充webm等格式以兼容更多浏览器 -->
  </video>
</header>

CSS 样式 #

控制头部默认状态与悬停状态的样式，视频默认隐藏，悬停时显示并铺满头部：

.header {
  position: relative;
  width: 100%;
  height: 60vh;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 避免视频干扰鼠标事件 */
}

.header.video-active .bg-video {
  opacity: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  font-size: 2rem;
}

.hover-trigger {
  cursor: pointer;
  /* 可自定义文本悬停样式，比如添加下划线 */
}

JavaScript 逻辑 #

监听鼠标的进入与离开事件，控制视频播放/暂停以及头部状态切换：

const hoverTrigger = document.querySelector('.hover-trigger');
const header = document.querySelector('.header');
const bgVideo = document.querySelector('.bg-video');

hoverTrigger.addEventListener('mouseenter', () => {
  header.classList.add('video-active');
  bgVideo.play().catch(err => {
    // 处理浏览器自动播放限制，部分浏览器需用户交互后才能播放视频
    console.log('视频自动播放失败:', err);
  });
});

hoverTrigger.addEventListener('mouseleave', () => {
  header.classList.remove('video-active');
  bgVideo.pause();
  bgVideo.currentTime = 0; // 重置视频到开头，下次悬停从头播放
});

关键注意点 #

• 视频必须添加muted属性，多数浏览器仅允许静音视频自动播放，否则会触发播放限制
• playsinline属性可避免移动端视频自动全屏播放
• 可根据需求调整过渡动画时长、视频显示透明度、头部高度等样式参数

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