在为元素设置动画后，为什么我的悬停状态会保持激活状态？

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％（屏幕宽度）和默认高度。因此，当您单击它时，您仍然会实际悬停文本。如果单击它并将鼠标移开很远，则悬停效果将消失。

Answer 2

建议： 使用cloneNode（）函数。 单击该按钮后，创建它的克隆。 触发克隆元素上的动画。

原因： 悬停时的元素将保留其事件但克隆元素不会。