为什么我的元素动画后我的悬停状态保持激活状态？答案

【问题标题】：Why does my hover state stay activated after I animate an element?为什么我的元素动画后我的悬停状态保持激活状态？
【发布时间】：2014-10-15 22:10:56
【问题描述】：

我有一个按钮，点击时会向左移动。这部分效果很好，但我对为什么悬停状态保持活动状态直到我移动鼠标感到困惑。我已经创建了一个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
  });
});

【问题讨论】：

标签： jquery css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：