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
  });
});

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

2 回答 2