jquery - 悬停在对象上时获取对象的“原始”（非悬停）背景颜色

Question

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

$('.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 进行潜在昂贵的扫描！

对我来说很好用。

- 编辑 -

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

如果您尝试获取颜色数据的元素的颜色（或背景颜色）继承自父元素，则克隆的对象将与 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

我可以建议将所有背景颜色定义移动到不同的类。当您需要特定类的背景颜色时，您可以即时创建元素并获取它的背景颜色，并且无需 :hover 修改。像这样的东西：

$('<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');
    }
);