Changing background image of img element with sprites - html

Question

Trying to change the background image of a button using CSS, JS and jQuery. HTML first:
<button id='btn_home'>
<img class='home_green' src="images/menus.png">
</button>
Now the CSS:
.home_green {
background:url(images/menus.png) 0 0;
}
.home_blue {
background:url(images/menus.png) 0 -106px;
}
Here is the jQuery script. I don't think this is the problem because the console output is perfect:
$("#btn_home").find('img').hover(
function () {
console.log("mouse enter");
$(this).removeClass('home_blue');
$(this).addClass('home_green');
console.log($(this).attr('class'));
},
function () {
console.log("mouse leave");
$(this).removeClass('home_green');
$(this).addClass('home_blue');
console.log($(this).attr('class'));
}
);
I get no errors thrown, but no change to my background image, either. Pretty sure that I am defining something wrong in the relationship between my HTML and CSS, but I don't know what. Thanks for any help.
EDIT: Here is another attempt. When I try this, no image at all shows up. Everything else (CSS, jQuery) is the same:
<button id='btn_home' class='home_green'></button>

Answer 1

This can be done by CSS
you can add styles to button itself instead of img just add a width and height
<button id='btn_home'></button>
.btn_home {
background:url(images/menus.png) 0 0;
}
.btn_home:hover {
background:url(images/menus.png) 0 -106px;
}
div {
width: 89px;
height: 91px;
}
button {
background: url(http://kaioa.com/b/0907/sprite_eyecatcher.png) no-repeat;
width: 100%;
height: 100%;
border: 0;
background-position: -5px -4px;
padding: 0px;
cursor: pointer;
}
button:hover {
background-position: -94px -4px;
}
<div>
<button id='btn_home'></button>
</div>

Answer 2

Here is a working fiddle to accomplish what you want.
Correct, you can just set a background image to the <button> element, and remove the <img> inside.
Let me know if you have any questions.