jquery - 获取当前悬停的元素的非悬停 css backgroundColor Prop

Question

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

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

我正在尝试使用 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 选择器或其他一些众所周知的技巧？

Answer 1

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

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

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