当鼠标hover在对象上时，获取对象的“原始”（非hover）背景颜色

我可以使用以下函数获取任何元素的背景颜色：

$('.example').css('background') 

但是，在我的情况下，鼠标正在移动此元素，并且由于CSS :hover伪类，我收到了修改后的颜色。

有没有办法收到原色？ 就像是

 $('.example').cssWithoutHover('background') 

你可以在这里测试一下 。 把5放在最后一个单元格中。 动画后，此单元格的颜色会发生变化。

Answer 1

您可以在DOM准备好扫描起始BG颜色并将它们存储为数据属性。

 var board = $('#board-numbers'); board.children('div').each(function() { $(this).data('start-bg', $(this).css('background')); }); board.on('hover', 'div', function() { var curr_bg = $(this).css('background'); var start_bg = $(this).data('start-bg'); }); 

Answer 2

扩展@vadim发布的想法，我想我可以做得更好。 只需clone()对象，不要将它放在DOM中。 那样它就不会徘徊！

 css_color_without_hover_ = $('.example').clone(false).css('background'); 

保存您在文档加载时不得不进行可能昂贵的DOM扫描！

很好地为我工作anyhoo。

– 编辑 –

我刚刚注意到这种技术存在局限性（或“陷阱”）。

如果您尝试获取颜色数据的元素的颜色（或背景颜色）inheritance自父元素，则克隆的对象将与CSS模式不匹配，这意味着样式不会获得应用于jQuery对象。

在这种情况下的解决方法是克隆父对象（适当的样式应用于其中），并获取其样式，而不是孩子的样式。

Answer 3

几乎可以肯定你不能那么容易。

这是一个派生的解决方案：

页面加载后，您可以将背景颜色存储在自定义属性中（在hover时不会更改）以便以后获取它：

 $().ready(function(){ $('.example').each(function(el){ $(this).data('bgcolor', $(this).css('background-color')); }); $('.example').hover(function(ev){ console.log($(this).data('bgcolor')); }); }): 

Answer 4

你可以使用jss库。 它使您可以访问样式表规则

Answer 5

我建议将所有背景颜色定义移动到不同的类。 当你需要特定类的背景颜色时，你可以在运行中创建元素并获得背景颜色，它将没有：hover修改。 像这样的东西：

 $('
').css('background-color') 

Answer 6

另一种解决方案是使用jQuery hover（）来改变hover时的样式而不是纯CSS。 例如，

 $('.example').hover( function() { // handlerIn $(this).addClass('exampleHover'); }, function() { // handlerOut $(this).removeClass('exampleHover'); } );