Changing Background Color Using JQuery on Hover

Changing Background Color Using JQuery on Hover

I'm currently coding and programming a website using Ruby on Rails but
having some issues with a fairly basic element within the page. Basically,
my backend system will contain a color that will change each month, that
color is then pulled and used throughout the website for multiple
elements. This is one of those elements...
I have a div with an image inside that will soon be a link. I want to use
JS or JQuery to make this element change it's background color on hover. I
know it's simple but, for some reason, I can't figure this out. I'll
include a jsfiddle of the entire setup:
HTML:
<div class="contribute_buttons">
<img
src="https://s3.amazonaws.com/static-passenger2/images/shop_and_support.png">
</div>
CSS:
.contribute_buttons {
width: 300px;
height: 39px;
float: left;
background-color: #393839;
margin-top: 5px;
margin-bottom: 15px;
}
JAVASCRIPT:
$(document).ready(function() {
var colorOrig=$(".contribute_buttons").css('background');
$(".contribute_buttons").hover(
function() {
//mouse over
$(this).css('background', '#AAEE00')
}, function() {
//mouse out
$(this).css('background', colorOrig)
});
});
http://jsfiddle.net/EQeMs/
Thanks in advance for the help!