Get "original" (non-hover) background color of object when hovering over it

Question

I can get the background color of any element with the following functions:

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

However, in my case, the mouse is moving over this element and I receive a modified color because of a CSS :hover pseudo-class.

Is there any way to receive original color? Something like

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

You can test it here. Just put 5 in the last cell. The color of this cell will change after animation.

Answer 1

You could do a sweep of the starting BG colours on DOM ready and store these as data attributes.

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