jQuery的悬停

Question

这是我如何使用jQuery hover

悬停（handlerIn（eventObject）传递， handlerOut（eventObject）传递）

$(".box").each(function() { 
    var $this = $(this); 
    $this.data('baseColor', $this.css('background-color')); 
    $this.hover(function() { 
     $this.animate({ 
      backgroundColor : "white" 
     }, 50); 
    }, function() { 
     $this.animate({ 
      backgroundColor : $this.data('baseColor') 
     }, 50); 
    }); 
}); 

问题是当DOM改变悬停效果不再有效。我知道住方法多次为我解决了这样的问题，但我该如何解决它呢？

Answer 1

从manual：

所有动画处理的属性应该被动画 到单个数字值，除非 下面指出的;大多数 非数字属性不能使用 基本jQuery功能进行动画制作。 （对于 示例，宽度，高度或左侧可以为 动画，但背景色不能为 ）。除非指定了其他 ，否则将属性值视为 像素数。在适用的情况下，单位em和％可以是 。

具体For example, width, height, or left can be animated but background-color cannot be.

如果你想只是为了更新背景颜色为白色，请尝试：

$this.hover(function() { 
     $this.css('background-color', '#fff'); 
}, function() { 
     $this.css('background-color',$this.data('baseColor')); 
}); 

如果你想使效果出现在用户悬停后50毫秒，请尝试使用delay。

现在，如果您尝试从当前颜色转换为白色，则需要了解颜色混合。但为了节省您的麻烦，这里的优秀script by Michael Leigeber。它支持背景颜色褪色。

---