Question

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

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

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

有没有办法获得原色？像

这样的东西

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

您可以对其进行测试here。把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扫描！

很好地为我做任何事。

- 编辑 -

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

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

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

Answer 3

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

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

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

$().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

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

$('<div class="normal-cell"></div>').css('background-color')

Answer 6

另一个解决方案是使用jQuery hover()来改变悬停时的样式而不是纯CSS。例如，

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

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

6 个答案: