将鼠标悬停在 html 上时如何停止移动文本 - Html

在编写网页时，经常会用到移动文本的效果，但当鼠标悬停在文本上方时，我们需要暂停文本的移动。本文将介绍如何在 HTML 中实现此功能。

方案一：CSS 中使用 hover 伪类

CSS 中的 hover 伪类可以用来实现在鼠标悬停时改变某个元素的状态。我们可以将移动文本的效果放在 CSS 中，并使用 hover 伪类实现停止移动的效果。

/* 定义移动文本的动画 */
@keyframes move {
  from {transform: translateX(0);}
  to {transform: translateX(200px);}
}

/* 应用动画到元素 */
.text {
  animation: move 5s infinite;
}

/* 停止移动动画 */
.text:hover {
  animation-play-state: paused;
}

上述代码中，我们用 @keyframes 定义了一个名为 move 的动画，将元素沿 X 轴向右移动 200px。然后，我们使用 animation 属性将此动画应用到类名为 text 的元素，以无限循环播放动画。

在最后一行的 .text:hover 中，我们使用了 animation-play-state 属性。当鼠标悬停在 .text 元素上时，它的值被设置为 paused，从而停止动画。

方案二：JavaScript 实现

除了使用 CSS，我们还可以使用 JavaScript 来实现此功能。具体来说，我们可以使用 Element.animate 方法在 JavaScript 中控制元素的动画。

<!-- 在元素上添加 onmouseover 和 onmouseleave 事件 -->
<div class="text" onmouseover="stopAnimation()" onmouseleave="startAnimation()">Some text</div>

/* 定义移动文本的动画 */
@keyframes move {
  from {transform: translateX(0);}
  to {transform: translateX(200px);}
}

/* 定义停止动画的样式 */
.text.paused {
  animation-play-state: paused;
}

/* 应用动画到元素 */
.text {
  animation: move 5s infinite;
}

// 获取 .text 元素
const text = document.querySelector('.text');

// 定义一个 animation 对象，用于控制动画
let animation;

// 定义停止动画的函数
function stopAnimation() {
  text.classList.add('paused');
  animation.pause();
}

// 定义开始动画的函数
function startAnimation() {
  text.classList.remove('paused');
  animation.play();
}

// 在页面加载完成后，启动动画
window.onload = function() {
  animation = text.animate(
    {transform: 'translateX(200px)'},
    {duration: 5000, iterations: Infinity}
  );
}

在 JavaScript 中，我们首先获取到 .text 元素，并定义一个 animation 对象。当鼠标悬停在元素上时，我们调用 stopAnimation 函数，该函数将给元素添加 paused 类，从而停止动画。当鼠标离开元素时，我们调用 startAnimation 函数，它从元素中删除 paused 类，并播放动画。

在页面加载完成后，我们启动动画。具体来说，我们使用 Element.animate 方法定义了一个动画，沿着 X 轴移动元素 200px，持续时间为 5 秒，无限循环播放。

总结

本文介绍了两种方法来停止移动文本的动画效果。一种是使用 CSS 中的 hover 伪类，另一种是使用 JavaScript 控制动画的播放状态。无论哪种方法，我们都能够在鼠标悬停时停止元素的移动，提升网页的交互体验。