如何让CSS跑马灯菜单仅在悬停特定文本时暂停动画？

我完全懂你的困扰——现在整个容器悬停才暂停动画，短文本场景下确实太突兀了，只想hover单个文本元素时触发暂停对吧？咱们一步步搞定这个问题：

问题根源 #

你的动画其实绑定在两个核心元素上：

• .inner 容器的 marquee 动画负责整体垂直滚动
• .switcher 元素的 switch 动画负责文本切换

之前你尝试直接给 .switcher:hover 设置暂停，只能暂停当前这个 .switcher 自己的动画，但 .inner 的滚动动画还在继续，所以看起来完全没效果。咱们需要同时暂停**父容器.inner和所有.switcher**的动画，只要其中任意一个.switcher被hover就行。

解决方案：使用CSS :has() 选择器 #

现代浏览器已经支持:has()选择器（可以理解为“父元素包含某个被hover的子元素”的选择器），用它就能精准实现咱们想要的效果：

修改核心CSS规则 #

把你原来的这两行：

.inner:hover .switcher { animation-play-state: paused; }
.inner:hover { animation-play-state: paused; }

替换成：

/* 当.inner包含被hover的.switcher时，暂停所有.switcher的动画 */
.inner:has(.switcher:hover) .switcher {
  animation-play-state: paused;
}
/* 同时暂停.inner的滚动动画 */
.inner:has(.switcher:hover) {
  animation-play-state: paused;
}

完整可运行代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
body { overflow: hidden; font-size: 100%; }
.outer { transform: rotate(10deg); margin-left: -6vw; }
.inner { 
  font-family: 'Catamaran'; 
  font-size: calc(2em + 7vw); 
  font-weight: 900; 
  -webkit-text-fill-color: white; 
  -webkit-text-stroke: 2px; 
  letter-spacing: -.9vw; 
  line-height: calc(.7em + 1vw); 
  animation: marquee 30s linear infinite; 
  display: inline-block; 
}
.inner span:nth-of-type(2n) { font-size: calc(1em + 5vw); }
.inner span:nth-of-type(2n-1) { -webkit-text-stroke-color: rgba(80, 80, 80, 0.753); }
.switcher { 
  position: relative; 
  top: 0%; 
  animation: switch 30s linear infinite; 
}
@keyframes marquee { 100% { transform: translateY(-100%); } }
@keyframes switch { 
  0%, 50% { top: 0%; } 
  50.01%, 100% { top: 100%; } 
}
/* 新增的hover暂停规则 */
.inner:has(.switcher:hover) .switcher {
  animation-play-state: paused;
}
.inner:has(.switcher:hover) {
  animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
  <div class="inner">
    <span class="switcher">PRANAV NAIR</span><br>
    <span class="switcher"><a>ABOUT</a></span><br>
    <span class="switcher">PRANAV NAIR</span><br>
    <span class="switcher"><a>DESIGN</a></span><br>
    <span class="switcher">PRANAV NAIR</span><br>
    <span class="switcher"><a>CODE</a></span><br>
    <span class="switcher">PRANAV NAIR</span><br>
    <span class="switcher"><a>SOCIAL</a></span><br>
    <span class="switcher">PRANAV NAIR</span><br>
    <span class="switcher"><a>BOOK</a></span><br>
    <span class="switcher">PRANAV NAIR</span><br>
    <span class="switcher"><a>BLOG</a></span><br>
    <span>PRANAV NAIR</span><br>
    <span><a>ABOUT</a></span><br>
    <span>PRANAV NAIR</span><br>
    <span><a>DESIGN</a></span><br>
    <span>PRANAV NAIR</span><br>
    <span><a>CODE</a></span><br>
    <span>PRANAV NAIR</span><br>
    <span><a>SOCIAL</a></span><br>
    <span>PRANAV NAIR</span><br>
    <span><a>BOOK</a></span><br>
    <span>PRANAV NAIR</span><br>
    <span><a>BLOG</a></span><br>
  </div>
</div>
</body>
</html>

兼容性备选方案（JS实现） #

如果需要兼容不支持:has()的老浏览器（比如Firefox 120及以下），可以用JavaScript监听鼠标事件来切换动画状态：

const switchers = document.querySelectorAll('.switcher');
const inner = document.querySelector('.inner');

switchers.forEach(switcher => {
  switcher.addEventListener('mouseenter', () => {
    inner.style.animationPlayState = 'paused';
    switchers.forEach(s => s.style.animationPlayState = 'paused');
  });
  switcher.addEventListener('mouseleave', () => {
    inner.style.animationPlayState = 'running';
    switchers.forEach(s => s.style.animationPlayState = 'running');
  });
});

不管用CSS还是JS方案，都能实现只hover单个文本元素时暂停整个跑马灯动画的效果啦！

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