jQuery - 如何用懸停覆蓋背景顏色動畫？

我是jQuery的新手，需要一些幫助解決以下問題。jQuery - 如何用懸停覆蓋背景顏色動畫？

我有一個簡單的數據表（20行4列）在網頁上（asp.net mvc）。注意 - 我使用<div>標籤而不是<table> <td> <tr>標籤建立了表格。

對於每一行都有彙總數據，然後單擊該行右側的「編輯記錄」選項。點擊「編輯記錄」可以看到更多的信息。

這裏是一個圖案：（在「真正的」表NB的名稱/日期是真實姓名/日期等）

---------------------------------------------------------------------------- 
Name     Date    Status    [ Edit Record] 
---------------------------------------------------------------------------- 
Name     Date    Status    [ Edit Record] 
----------------------------------------------------------------------------

有四種效果我想創建：

當用戶將鼠標懸停在一排的背景顏色改變
當用戶點擊「編輯記錄」的更多信息可見度翻轉
當附加信息可見背景顏色的變化。
當附加信息被隱藏在背景顏色默認爲白色

到目前爲止，我有以下的jQuery代碼幾乎工作（見問題在底部）：

該代碼處理「懸停「效果（1）：

$("div.record").hover(function() { 
     $(this).addClass("recordhover"); 
      }, function() { 
       $(this).removeClass("recordhover"); 
});

該代碼處理的附加信息和背景顏色的可見性（2,3,4）：

$("div.recordtopline > div.recorddetail").click(function(event) { 
     if (this == event.target) { 
      if ($(this).parent("div").next(".recordbelowline").is(':hidden')) { 
       $(this).parent("div").next(".recordbelowline").show(); 
       $(this).parent("div").parent("div").animate({backgroundColor: "#FFEFC6" }, 'fast'); 
       } 
       else { 
        $(this).parent("div").next(".recordbelowline").hide(); 
        $(this).parent("div").parent("div").animate({ backgroundColor: "#FFF" }, 'fast'); 
       } 
       return false; 
      } 
     });

問題

當我加載網頁，懸停效果完全適用於所有行。但是，如果我選擇了「編輯記錄」以查看更多信息，然後隱藏了附加信息，則懸停效果不再適用於該行，即根據我的動畫代碼，backgorund顏色保持爲白色。

我該如何克服這個問題，使懸停效果'覆蓋'背景動畫效果？

來源

2010-04-23 Alex P

當你直接在元素上設置樣式（與element.style.thing=或$(element).css()或者，在這裏，animate），你有效增加內嵌style=""屬性持有該規則。內聯樣式總是覆蓋樣式表規則。

所以設置背景回到了它之後，你就必須刪除的規則：

var record= $(this).parent('div').parent('div'); 
record.animate(
    {backgroundColor: '#FFF'}, 
    {duration: 'fast', complete: function() { 
     record.css('backgroundColor', ''); 
    }} 
);

您是否使用了一些插件，使動畫的backgroundColor工作？通常情況下不會。如果您不需要動畫，則只需在選中/取消選中時添加/刪除行中的類並讓樣式表處理它即可。

來源

2010-04-23 09:53:32 bobince

我正在使用彩色動畫插件，我從jQuery下載。如果我正確地理解了你，你說使用樣式表和jQuery的'addClass'和'removeClass'功能可以更容易地達到預期的效果。僅供參考，如果改變了任何東西，我需要支持Ie6 – 2010-04-23 10:17:58

完美實現了這項工作。喜歡它。這麼簡單，我覺得很愚蠢！非常感謝您的幫助。 – 2010-04-23 10:23:21

兩個備註：

如果IE6的兼容性不是一個問題，你不需要綁定懸停效果，只要使用CSS：在你的DIV懸停選擇。
一旦直接在div上應用樣式，該樣式將覆蓋以前的更改，因此一旦細節div變爲隱藏，您必須移除背景顏色：$（yourDiv）.css（'backgroundColor'，''）;

來源

2010-04-23 09:57:45 mamoo

很讓我懊惱的是，現在支持IE6是需要... – 2010-04-23 10:13:33

jQuery - 如何用懸停覆蓋背景顏色動畫？

回答

相關問題