javascript - 为什么这个悬停事件会在页面加载时触发？

Question

这是我的旧代码，它有效：

$('.logo').hover(function(){
  $(this).addClass('animated swing')},
  function(){$(this).removeClass('animated swing')
});

这是我试图重构的新代码。问题是它在页面加载时添加了“动画摆动”类（我没有将鼠标悬停在徽标上）。

$('.logo').on('hover').toggle( function() { $(this).toggleClass('animated swing') });

它也不会超过第一次

score 2 · Accepted Answer

您必须更改您的代码。on 接受 2 个参数，事件和要执行的函数。它应该是这样的：

$('.logo').on('hover', 
    $(this).toggle( function() { $(this).toggleClass('animated swing') });
);

当您在现实中使用 .on('hover').toggle(...) 时，您将元素向前传递，而不是将该函数应用于“悬停”侦听器，因此它会在解释时执行（从而触发动画只要该行被解释而不是等待鼠标悬停事件）。

score 1 · Accepted Answer

干得好：

$('.logo').on('hover', function() { $(this).toggleClass('animated swing') });

此外，我不确定带有空格的类是否是个好主意。试试animated-swing吧。

2 回答 2