仅在类悬停时添加 javascript 脚本答案

【问题标题】：Add javascript script only when class is on hover仅在类悬停时添加 javascript 脚本
【发布时间】：2019-06-17 19:30:10
【问题描述】：

我有这个 javascript 可以向 class="link_mainhub" 上的元素输出一个动作

<script>
const el = document.querySelector('.link_mainhub')
const fx = new TextScramble(el)

let counter = 0
const next = () => {
  fx.setText(phrases[counter]).then(() => {
    setTimeout(next, 800)
  })
  counter = (counter + 1) % phrases.length
}

next()
</script>

但是，我只想在class="link_mainhub" 悬停时运行脚本。

我尝试将const el = document.querySelector('.link_mainhub') 更改为const el = document.querySelector('.link_mainhub:hover')，但没有成功。

如何仅在我的班级被悬停时重现脚本？

谢谢。

【问题讨论】：

.hover()?
$( yourClass ).mouseover(function() { //your stuff here })
@ScottWeaver 我没看到他说他在哪里使用 jQuery？
眯着眼睛仔细看，你会看到的
它被错误地添加为一个标签来表示 vanilla javascript querySelector 选择器。但是，jQuery 使用 querySelector 作为其底层函数，我编辑了 jquery-selector 以获得更合适的 css-selector。

标签： javascript html arrays css-selectors dom-events

【解决方案1】：

为什么不给元素添加 Mouseover 的 eventListener。 el.addEventListener('mouseOver', next)

【讨论】：

嗨，我已经添加了事件监听器，现在只有当我将鼠标悬停在类上时它才会启动动画，但是，当我执行 mouseout 时，动画会继续播放。
有什么方法可以停止mouseout上的动画？
好的。那么可能 mouseOver 不是您需要的事件。试试 mouseEnter
仅当您为此创建函数时。并在元素上调用 eventListener mouseOut