Question

我有一个div，说DivX，我在hover中为css编写了background-color个功能，以更改其jquery。此外，我添加了left动画效果，以移动其DivX。现在的问题是，每当我抓住hover时，background-color效果就会发生并完全激活，但在hover期间cursor改变了拒绝回头，直到我移动cursor。

DEMO

重现的步骤：

将DivX放在background-color上方，您可以看到其DivX已更改。
点击它。[注意：不要移动光标。]
现在您可以看到，background-color已动画到新位置，但其mouse cursor保持不变。
现在，移动background-color，您会发现Hover更改。

我的问题是，如何在我的情况下使用{{1}}功能而不会出现任何中断。

Answer 1

$(document).ready(function(){
  var count = 0;
  $("#test").click(function(){
    $(this).animate({ "left": "200"}, 500 );
    if(!count){
      count++;
    $(this).css({'background-color':'orange'});
    }
  });  
  $("#test").hover(function(){
    $(this).css({'background-color':'yellow'});
  }, function(){
  $(this).css({'background-color':'orange'});
  });

});

http://jsfiddle.net/mN7L8/7/

Answer 2

这是一种解决方法，其工作方式与Yusaf的答案类似。设置一个在悬停时将背景保持为橙色的类，然后使用“animate complete”回调删除该类。删除该类后，如果再次悬停，您将获得所需的结果。

CSS：

#test.fix:hover, #test.fix{
    background-color:orange;
}

JS：

$("#test").click(function(){ 
   $(this).animate({ "left": "200"}, 500, function(){ $(this).removeClass("fix");
   }).addClass("fix");
});

悬停期间的颜色变化拒绝恢复

DEMO

2 个答案:

http://jsfiddle.net/mN7L8/7/