2

再会。

HTML

<div id="Button"></div>

CSS

background: url("../images/play.png") left center no-repeat;
background-size: cover;
width: 100px;
height: 100px;
float: left;
cursor: pointer;

jQuery

$("#Button").on("click",function() {
  $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
});

但不幸的是，背景没有改变。为什么不呢？

4

5 回答 5

3

您的问题在于属性值末尾的半列。删除它并尝试。

前任：

$(this).css("background", 'url("http://placehold.it/32x32") left center no-repeat');

小提琴

在指定 css 属性名称的值时存在半列会使其无效并且不会被应用。

 $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
                                                                            ^___ Here

另请注意，将 css 直接应用于元素会使级联样式更加困难且可维护性较差，因为它们直接应用于元素的样式属性。最好的方法是添加一个 css 规则并将类设置为元素。

于 2013-09-19T18:52:30.487 回答
1

这是更有效的方式，你可以分开你的代码

HTML

<div id="Button"></div>

CSS

background: url("../images/play.png") left center no-repeat;
background-size: cover;
width: 100px;
height: 100px;
float: left;
cursor: pointer;

具有类 bg 的 div

div.bg {

background: url("../images/pause.png") left center no-repeat;

}

jQuery

$("#Button").on("click",function() {
  $(this).addClass("bg");
});
于 2013-09-19T18:53:07.680 回答
0

尝试分别设置每个属性。此外，您应该检查 url 是否正确。

于 2013-09-19T18:45:09.960 回答
0

尝试这个：

$("#Button").on("click", function () {
    $(this).css({
        'background-image': 'url("../images/pause.png")', 
        'background-position': 'left center', 
        'background-repeat': 'no-repeat'
    });
});

正如Bergi 和André Dion 在评论中提到的那样，如果背景图像需要更改时，您可以删除background-positionand属性。background-repeat

于 2013-09-19T18:47:58.303 回答
0

问题可能是不正确的图像路径或 css 中的分号（添加分号将使其不起作用）。我创建了一个 jsfiddle 来演示您的问题的解决方案，尽管使用备用图像，因为我无权访问您的原件。

http://jsfiddle.net/VpWcB/

相关js代码转载如下：

$("#Button").on("click", function(){
    $(this).css('background', 'url(../images/pause.png) left center no-repeat');
})
于 2013-09-19T18:49:20.707 回答