CSS鼠标悬停效果失效及页面显示不符预期技术求助

你的代码存在多处语法错误和逻辑问题，导致hover效果失效、页面显示异常，具体问题及修复如下：

1. CSS与JS代码混写，破坏CSS结构 #

你把JavaScript代码直接嵌入到CSS的@keyframes letterAnim关键帧中，这会导致浏览器无法正确解析CSS，后续所有CSS规则都会失效。

修复：
将JavaScript代码从CSS中移出，单独放到HTML的<script>标签内执行。

2. hover选择器语法错误 #

.nav-link :hover span 中的空格是错误的，该选择器表示"当.nav-link的后代元素被hover时选中span"，而你需要的是"当.nav-link本身被hover时选中内部的span"，正确写法为.nav-link:hover span。

3. CSS变量调用语法错误 #

calc(var (--i) + 0.2s) 中var与(--i)之间多了空格，正确的变量调用格式是var(--i)，应改为calc(var(--i) + 0.2s)。

4. 图片拦截hover事件 #

.navbar-img为绝对定位，覆盖在导航链接上方，导致鼠标无法触发链接的hover事件。需给图片添加pointer-events: none，让鼠标事件穿透到下方的链接元素。

5. HTML初始文本未被替换 #

HTML中导航链接是静态的"Link 1"等文本，但JS逻辑是要替换为自定义文本并拆分为span元素，因此需要清空初始链接文本，确保JS能正确生成字母span。

修复后的完整代码 #

HTML部分 #

<div class="container">
  <div class="navbar">
    <video src="video-1.mp4" autoplay loop muted class="nav-video"></video>
    <img src="img.png" class="navbar-img">
    <nav class="nav">
      <a href="#" class="nav-link"></a>
      <a href="#" class="nav-link"></a>
      <a href="#" class="nav-link"></a>
      <a href="#" class="nav-link"></a>
      <a href="#" class="nav-link"></a>
    </nav>
  </div>
</div>

<script>
  const links = [...document.querySelectorAll(".nav-link")]
  const navText = ['About', 'Clients', 'Portfolio', 'Careers', 'Fun']
  links.forEach((link, i) => {
    navText[i].split('').forEach((letter, j) => {
      const span = document.createElement('span')
      span.textContent = letter
      span.style.cssText = `--i: .${j}s`
      link.append(span)
    })
  })
</script>

CSS部分 #

@font-face {
  font-family: 'AlfaSlabOne-Regular';
  src: url('AlfaSlabOne-Regular.ttf');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.container {
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgb(44, 44, 63);
}

.navbar {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
  opacity: 0.2;
  z-index: -1;
}

.navbar-img {
  width: 50%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0.2;
  transition: transform 1.5s;
  pointer-events: none; /* 让鼠标事件穿透到下方链接 */
}

.nav-link {
  font-family: 'AlfaSlabOne-Regular';
  font-size: clamp(3.5rem, 10cqi, 10rem);
  text-decoration: none;
  display: block;
  letter-spacing: 0.2rem;
  margin: 1rem 0;
}

.nav-link:hover {
  transform: translateX(-2rem);
  transition: transform 0.3s;
}

.nav-link span {
  text-transform: uppercase;
  display: inline-block;
  color: #fff;
  transform: translateX(0);
  transition: color 0.5s, transform 0.5s;
}

.nav-link:hover span {
  color: #ebe8c8;
  transform: translateX(2rem);
  transition-delay: calc(var(--i) + 0.2s);
}

@keyframes letterAnim {
  0% {
    transform: translate(0, 0);
    color: #fff;
  }
  50% {
    color: #E6A570;
  }
  100% {
    transform: translate(2rem, 0);
    color: #ebe8c8;
  }
}

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