悬停时的颜色更改无法恢复

Question

我有一个

，称为DivX，我在css中编写了hover功能，用于更改其background-color。此外，我还为其添加了jquery动画效果，以移动其left。现在的问题是，每当我点击DivX时，在其上发生了hover效果，并且完美地进行了动画处理，但是在hover期间更改的background-color拒绝恢复，直到我移动cursor。

演示

重现步骤：

• 将光标放在 DivX 上，您会看到它的 background-color 发生变化。
• 点击它。[注意：不要移动光标。]
• 现在，您可以看到 DivX 已经动画到了新位置，但它的 background-color 保持不变。
• 现在，移动鼠标光标，您会注意到 background-color 发生变化。

我的问题是，如何在我的情况下利用 Hover 功能而没有任何干扰？

- Rajaprabhu Aravindasamy

---

对于我来说（Friefox 10.0.12），当元素移出光标时，元素会在单击后更改回旧的背景颜色，导致悬停条件过期。您是否在特定浏览器中遇到此问题？ - Mike Brant

@MikeBrant，我正在ie9中测试这个，让我在FireFox中检查一下。 - Rajaprabhu Aravindasamy

我在Chrome中遇到了这个问题。悬停背景会一直显示，直到我点击后移动鼠标。 - Viktor S.

我知道这似乎有些取巧，但你可以尝试使用jQuery来实现悬停效果，而不是使用纯CSS，这样希望能够在各种浏览器中获得更一致的行为。 - Mike Brant

在我的电脑上，Firefox、Chrome和IE9都能正常运行，虽然在IE9上改变颜色会稍有延迟，但不会导致鼠标移动。 - Ashley Sheridan

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/

- Yusaf Khaliq

---

点击后（并在短时间内仍悬停）背景发生变化，这个问题可能只是我有点挑剔。 - Sean

我试用了你的演示，但它也存在不一致性。第一次点击时，它运行良好，但在重新执行相同操作（在动画完成后）时，颜色会不必要地改变。已在IE、FF、Safari和Chrome中进行测试。 - Rajaprabhu Aravindasamy

谢谢你，但对于悬停功能，我还没有准备采用这种复杂的解决方案。再次感谢您的支持。 - Rajaprabhu Aravindasamy

复杂？：/ 是指您更喜欢较少的JS和更多的CSS，还是实际的JS太复杂了？ - Yusaf Khaliq

这个 http://jsfiddle.net/mN7L8/14/ 怎么样，它并不包括递增。 - Yusaf Khaliq

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

- tedski