鼠标悬停叠加文本列表时切换全屏背景视频故障排查

Let's walk through the issues with your code and get it working as intended. Here's what was missing or broken, plus the corrected version:

Key Issues in Your Original Code #

1. No Initial Video Source: Your <video> element didn't have a default src, so it couldn't display anything on page load.
2. Invalid CSS Hover Selector: The selector #text-list li:hover + #video-container #video won't work—#video-container isn't an adjacent sibling of your list items. We'll handle video playback via JavaScript instead.
3. No Play Trigger on Hover: Even if you set the video source on hover, you need to explicitly call play() to start playback.
4. Text List Z-Index: Your text list was positioned absolutely but didn't have a higher z-index than the video, which could make it unclickable or hidden.

Corrected Full Code #

HTML

<div id="video-container">
  <video muted id="video" loop></video>
</div>
<ul id="text-list">
  <li data-video="http://www.w3schools.com/html/movie.mp4"><a href="http://google.com" target="_blank">Line 1</a></li>
  <li data-video="https://www.w3schools.com/html/mov_bbb.mp4">Line 2</li>
  <li data-video="http://www.w3schools.com/html/movie.mp4">Line 3</li>
</ul>

CSS

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Ensure no extra spacing */
}

#text-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style-type: none;
  z-index: 10; /* Critical: keeps text above video */
  padding: 0;
  margin: 0;
}

#text-list li {
  cursor: pointer;
  padding-bottom: 20px;
  color: #fff; /* Make text visible against video */
  font-size: 2rem;
  text-align: center;
  transition: color 0.2s; /* Optional hover effect */
}

#text-list li:hover {
  color: #ccc; /* Optional hover effect */
}

#text-list li a {
  color: inherit;
  text-decoration: none;
}

JavaScript

const textList = document.getElementById("text-list");
const video = document.getElementById("video");
const listItems = textList.querySelectorAll("li");

// Initialize with the first video
video.src = listItems[0].dataset.video;
video.load();
video.play();

// Handle hover to switch videos
textList.addEventListener("mouseover", (event) => {
  const targetLi = event.target.closest("li");
  if (!targetLi) return;

  const newVideoSrc = targetLi.dataset.video;
  if (video.src !== newVideoSrc) {
    video.src = newVideoSrc;
    video.load();
    video.play();
  }
});

// Handle clicks: let the first link navigate, ignore others (adjust as needed)
textList.addEventListener("click", (event) => {
  const targetLi = event.target.closest("li");
  if (!targetLi) return;

  const link = targetLi.querySelector("a");
  if (!link) {
    event.preventDefault(); // Prevent default click behavior for non-link items
  }
});

What Changed & Why #

• Initial Video Load: We set the first list item's video as the default source, load it, and start playback immediately.
• Z-Index for Text: z-index:10 ensures your text list stays above the video so users can interact with it.
• Text Visibility: White text with an optional hover effect makes the list readable against any video background.
• Robust Event Handling: Using closest("li") ensures we catch hover/click events even when the user interacts with the <a> tag inside the first list item.
• Efficient Video Switching: We check if the new video source is different before reloading, avoiding unnecessary network calls.

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