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。它支持背景顏色褪色。

---