Question

美好的一天。

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;');
});

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

Answer 1

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

EX：

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

<强> Fiddle

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

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

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

Answer 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;

div with class bg

div.bg {

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

}

<强> JQuery的

$("#Button").on("click",function() {
  $(this).addClass("bg");
});

Answer 3

尝试分别设置每个属性。你也应该检查网址是否正确。

Answer 4

试试这个：

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

正如Bergi和AndréDion在评论中提到的，如果背景图片不需要更改，则可以删除background-position和background-repeat属性。

Answer 5

问题可能是错误的图像路径或css中的分号（添加分号会使其无效）。我已经创建了一个jsfiddle，它演示了你的问题的解决方案，虽然有替代图像，因为我无法访问你的原件。

http://jsfiddle.net/VpWcB/

背景不会改变

5 个答案: