在jQuery中懸停表格行時存儲背景顏色

我有一個ASP.NET GridView。每行都有不同的顏色，具體取決於其中一個顯示字段的值。有兩種可能的值，因此可以有兩種不同的顏色。在jQuery中懸停表格行時存儲背景顏色

現在我想突出顯示在鼠標懸停的GridView上的行。下面的腳本完美無缺，但是一旦我將鼠標懸停在外，任何行的顏色都會變成白色。

我想知道是否有一種方法來存儲鼠標懸停時行的「原始」顏色，並將鼠標懸停後放回。

  $(document).ready(function() { 
      $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
        $(this).css("background-color", "Lightgrey"); 
       }, function() { 
        $(this).css("background-color", "#ffffff"); 
       }); 

      });

我嘗試這個解決方案，似乎很符合邏輯的我，但它不工作，因爲腳本不存儲顏色值，一旦它完成執行：

$(document).ready(function() { 
      $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
        var color = $(this).css("background-color"); 
        $(this).css("background-color", "Lightgrey"); 
       }, function() { 
        $(this).css("background-color", "#ffffff"); 
       }); 
      });

任何人都可能會提供一個解決方案？由於

來源

2011-10-05 CiccioMiami

順便說一句你的解決方案的問題是'color'變量只存在於*函數定義的函數中（'hoverIn'）。它永遠不能通過'hoverOut'函數訪問。 – jensgram

您可以在以前的（原來的）值存儲在data屬性：

$(document).ready(function() { 
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
     var $this = $(this); 

     if (!$this.data('originalBg')) { // First time, no original value is set. 
      $this.data('originalBg', $this.css('background-color')); // Store original value. 
     } 
     $this.css("background-color", "Lightgrey"); 
    }, function() { 
     var $this = $(this); 

     $this.css("background-color", $this.data('originalBg')); 
    }); 
});

如果您使用HTML5，你可以在<tr>元素直接設置data屬性（docs）：

<tr style="background-color: #abc123;" data-originalBg="#abc123"> ... </tr>

這樣，你可以簡單地逃脫：

$(document).ready(function() { 
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
     $(this).css("background-color", "Lightgrey"); 
    }, function() { 
     $(this).css("background-color", $this.data('originalBg')); // Already set via the data-originalBg attribute of the `tr` 
    }); 
});

來源

2011-10-05 08:19:10 jensgram

驚人的它就像一個魅力！你可以向我解釋什麼是原創？它是一個屬性還是一個變量？ – CiccioMiami

HTML5示例非常好，我會提出這個建議。對於目前不支持HTML5的broswers，您可以包含html5shiv腳本http://code.google.com/p/html5shiv/ –

@CiccioMiami'originalBg'只是用來保存原始背景顏色的關鍵字（ '$ this.data（'originalBg'，$ this。css（'background-color'））'在關鍵'originalBg'下保存'background-color'的CSS值）。我用它來檢索原始值（'$ this.css（「background-color」，$ this.data（'originalBg'））;''將背景顏色的CSS值設置爲最初存儲的值。（這是否有道理？） – jensgram

你試過

var color = ''; 
$(document).ready(function() { 
    $("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(
     function() { 
      color = $(this).css("background-color"); 
      $(this).css("background-color", "Lightgrey"); 
     }, 
     function() { 
      $(this).css("background-color", color); 
     }); 
    }); 
});

這樣的varaible是全球性的，從而會記得值。

來源

2011-10-05 08:18:17

感謝您的回答，但它不起作用 – CiccioMiami

如果你的高亮顏色是靜態的（這似乎是），那麼另一種方法是創建一個類調用類似：

.highlight { 
    background-color: #efefef !important; 
}

，然後簡單地說：

$("#<%=gdUpdateProduct.ClientID%> tr:has(td)").hover(function() { 
    $(this).addClass("highlight"); 
}, function() { 
    $(this).removeClass("highlight"); 
});

然後你可以免費獲得原始背景顏色（在chrome 24.0.1312.57 m和win 18的FF 18.0.2上測試）。

Toby

來源

2013-02-16 23:50:42

這真棒謝謝。 –

在jQuery中懸停表格行時存儲背景顏色

回答

相關問題