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