获取当前被悬停的元素的非悬停 css backgroundColor 属性答案

【问题标题】：Get the non-hover css backgroundColor prop of an element currently being hovered over获取当前被悬停的元素的非悬停 css backgroundColor 属性
【发布时间】：2012-01-21 10:50:15
【问题描述】：

我有一个行表，单击时会“扩展”（通过在单击的行之后插入新行），我正在使用 css 对行中的单元格进行斑马样式以及“突出显示”悬停在一行上时单元格的样式。

我希望插入的行与被点击的行具有相同的背景色。

我正在尝试使用 jQuery 使用单击行中第一个单元格的 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 选择器或其他众所周知的技巧？

【问题讨论】：

标签： jquery css hover

【解决方案1】：

不，你不能那样做。不要。

更新颜色/样式的更好方法是添加/删除类。在 CSS 中定义您的样式，然后添加/删除类以确认显示。

试图通过比较 jQuery 中的信息来切换状态是古怪的！

【讨论】：

斑马条纹表只需将.zebra-striped 添加到table elem 即可，我想避免弄乱这种简单性。你介意扩大你的答案，包括为什么我不应该做我想做的事吗？
等待；你实际上并不关心颜色是什么，对吧？颜色取决于索引是偶数还是奇数，所以只需抓住索引即可。无论如何，您将如何处理背景颜色？您不通过比较颜色数据来执行此操作的原因正是出于这个原因；获取和比较元素的 CSS 属性非常复杂，而将预定义的状态/样式应用于元素则容易得多。
要么这样，要么将基色移到 TR 上，然后在突出显示时更改 TD 颜色（除非您的边距阻止它起作用）；这样 TR 颜色永远不会改变。

【解决方案2】：

为什么不取+2或-2行的同一个单元格的背景色呢？如果只有一行，您可以添加更多行获取颜色并快速删除它们。我认为最好的方法是为奇数和偶数元素保存颜色，并在以后需要时使用它们。但是话又说回来（我不确定是不是这种情况）如果您可以在单击已添加的行后添加一行会给您带来另一个问题:)

【讨论】：

你的解决方案是公平的@szym。如果没有 +-2 行，这意味着一些额外的 dom 操作（出于性能原因，我试图避免这种情况）——尽管在这种情况下，影响可能比有很多行时要小得多。谢谢。

【解决方案3】：

这是我目前的解决方法（感谢@Mathletics 和@szym 的回答）：

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

然后当我在行上下文中需要该颜色时：

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

可能不是最高效的解决方案，但我认为足够好。

我会暂时保留这个问题，以防万一有人有绝妙的主意。

【讨论】：