獲取當前懸停的元素的非懸停css backgroundColor prop

我得到了一個表單，當點擊時「展開」（通過在單擊行後面插入一個新行），並使用css斑馬風格的行中的單元格，以及當一排懸停時單元格的「高亮」風格。獲取當前懸停的元素的非懸停css backgroundColor prop

我希望插入的行具有與點擊行相同的背景顏色。

我想使用jQuery使用單擊行中第一個單元格的backgroundColor屬性來設置插入行的單元格的backgroundColor。

然而，當我這樣做時，我得到'突出顯示'的顏色，因爲我徘徊在點擊行上 - 我想要非懸停值。

CSS：

.zebra-striped tbody tr:nth-child(odd) td { 
    background-color: #f9f9f9; 
} 
.zebra-striped tbody tr:hover td { 
    background-color: #f5f5f5; 
}

的jQuery：

table.find('tbody').find('tr').on('click',function() { 
    var colourOfRow = $(this).find("td").filter(":first").css('backgroundColor'); 
    var newRows = $('<tr><td style="background-color:'+colourOfRow+';" colspan="'+numCols+'" rowspan="2">Fetching comment...</td></tr><tr></tr>'); 
    newRows.insertAfter($(this)); 
});

我敢肯定，我可以存儲顏色之前，我需要用它解決這個問題，但我的問題是：

有沒有我錯過的jQuery選擇器或其他一些衆所周知的技巧？

來源

2011-12-15 jah

不，你不能這樣做。別。

更新顏色/樣式的更好方法是添加/刪除類。在CSS中定義您的樣式，然後添加/刪除這些類以使顯示確認。

試圖通過比較jQuery中的信息來切換狀態是古怪的！

來源

2011-12-15 19:03:46 Mathletics

通過將`.zebra-striped`添加到`table` elem來完成斑馬條紋表的操作，我想避免與簡單性相混淆。你介意擴大你的答案，包括爲什麼我不應該做我想做的事嗎？ – jah 2011-12-15 19:20:57

等待;你實際上並不關心顏色是什麼，對吧？顏色取決於索引是偶數還是奇數，所以只需抓住索引即可。無論如何，你將如何處理背景顏色？你不通過比較顏色數據的原因正是出於這個原因;獲取和比較元素的CSS屬性非常複雜，並且只需將預定義的狀態/樣式應用於元素就容易得多。 – Mathletics 2011-12-15 20:36:00

爲什麼不採用+2或-2行的同一個單元格的背景顏色？如果只有一行可以添加更多行，可以快速獲取顏色並將其刪除。我認爲最好的方法是保存奇數和偶數元素的顏色，並在需要時再使用它們。但是，有一次（我不知道是這種情況），如果你可以點擊已經被添加了一行，爲您提供了另一個問題:)

來源

2011-12-15 20:15:51 szym

這裏後添加行的如何我解決它的那一刻（和感謝@Mathletics和@szym爲他們的答案）：

tableRows.each(function(index){ 
    $(this).data('oc', $(this).find("td").filter(":first").css('backgroundColor')); 
});

，然後當我需要那種顏色行上下文時：

var colourOfRow = $(this).data('oc');

可能不是最高效的解決方案，但不夠好我認爲。

我會留下這個問題，以防萬一有個好主意。

來源

2011-12-15 22:23:40 jah

獲取當前懸停的元素的非懸停css backgroundColor prop

回答

相關問題