html - 使用 Sprite 更改 img 元素的背景图像

Question

尝试使用 CSS、JS 和 jQuery 更改按钮的背景图像。 HTML 优先:

<button id='btn_home'>
    <img class='home_green' src="images/menus.png">
</button>

现在是 CSS:

.home_green {
    background:url(images/menus.png) 0 0;
}
.home_blue {
    background:url(images/menus.png) 0 -106px;
}

这是 jQuery 脚本。我不认为这是问题所在，因为控制台输出是完美的:

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

我没有抛出任何错误，但我的背景图片也没有任何变化。很确定我在我的 HTML 和 CSS 之间的关系中定义了一些错误，但我不知道是什么。感谢您的帮助。

编辑:这是另一种尝试。当我尝试这个时，根本没有图像出现。其他一切(CSS、jQuery)都是一样的:

<button id='btn_home' class='home_green'></button>

Answer 1

这可以通过 CSS

您可以将样式添加到 button 本身而不是 img 只需添加 width 和 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>