获取当前悬停的元素的非悬停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

回答

相关问题