Q:

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

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. 

A:

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

A:

Expanding on the idea posted by @vadim, I think I can go one better.  Simply clone() the object, and don't put it in the DOM.  that way it cannot be hovered over!
css_color_without_hover_ = $('.example').clone(false).css('background');

Saves you having to do a potentially expensive sweep of the DOM upon document-load as well!
Works nicely for me anyhoo.
-- EDIT --
I've just noticed that there are limitations (or 'gotchas') to this technique.
If the element for which you're trying to get the color-data, has its color (or background-color) inherited from a parent element, then the cloned object won't match the CSS pattern, meaning that the styling won't get applied to the jQuery object.
The work-around in this case, is to clone the parent object instead (to which the appropriate styling does apply), and fetch its styling, rather than the child's.

