jquery - 背景没变

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

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

例如:

$(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 直接应用于元素会使级联样式变得更加困难并且更难维护，因为它们直接应用于元素的 style 属性。最好的方法是添加 css 规则并将类设置为元素。