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

Question

这是我的旧代码：

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

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

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

它也不会超出第一次

Answer 1

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

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

当你使用.on（'hover'）。toggle（...）实际上你正在向前传递元素而不是将该函数应用于'hover'监听器，因此它在解释时被执行（因此一旦解释该行就触发动画，而不是等待鼠标悬停事件。）

Answer 2

你走了：

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

另外，我不确定具有whitspace的类是否是个好主意。请改为animated-swing。