鼠标悬停暂停动画效果：CSS 和 JavaScript 实现

您可以使用 CSS 的 ':hover' 伪类来控制鼠标悬停时元素的样式。在此基础上，通过使用 CSS 动画属性和 JavaScript 来暂停和重新启动动画。以下是一个示例代码：

HTML 代码：

<div class='box'></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s infinite;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(300px);
  }
}

.box:hover {
  animation-play-state: paused;
}

JavaScript 代码：

var box = document.querySelector('.box');

box.addEventListener('mouseenter', function() {
  box.style.animationPlayState = 'paused';
});

box.addEventListener('mouseleave', function() {
  box.style.animationPlayState = 'running';
});

在这个示例中，当鼠标悬停在 '.box' 元素上时，动画将暂停。当鼠标离开时，动画将重新启动。