jquery - 为什么在对元素进行动画处理后，我的悬停状态仍保持激活状态？

Question

我有一个按钮，单击时会向左移动。这部分效果很好，但我很困惑为什么悬停状态保持事件状态直到我移动鼠标。我创建了一个jsfiddle的问题。单击按钮，不要移动鼠标，请注意，即使动画完成后，也会触发悬停状态。

这是我的代码HTML:

<a href="#">Click</a>

CSS:

a{
color: white;
background: blue;
padding: 10px;
position: absolute;
left: 0;

}
a:hover{
background: green;
}

JS:

$('a').click(function(){
  var aW = $(this).outerWidth();
  $(this).animate({
      'left': aW
  });
});

Answer 1

我认为这是因为实际文本“链接”的默认属性为宽度 100%(屏幕宽度)和默认高度。因此，当您单击它时，您仍然会实际悬停文本。如果单击它并将鼠标移远，悬停效果将会消失。