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>

Answer 2

这是一个working fiddle来完成你想要的。

正确，您只需将背景图片设置为<button>元素，然后移除内部的<img>。

如果您有任何问题，请与我们联系。

改变与spges的img元素的背景图象

2 个答案: