css - 背景位置不起作用

Question

我正在尝试将图像的一部分用作音量按钮。

html代码

<div class="vol-pro-wrapper">
    <a href="javascript: void(0)" id="volume" class="volume"></a>
</div>

CSS代码

a {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}
.volume:hover {
  background-position: -31px -248px;
}
.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?
 904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
 }

真正奇怪的是音量没有按预期显示。但是当悬停时音量显示为我想要的。什么原因？先谢过了!

jsfiddle

Answer 1

这个规则...

.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?
 904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
 }

...覆盖这个(对于 .volume)...

.volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}

...，因为它紧随其后。

只需改变他们的顺序:

.play,.pause, .previous, .next ,.volume {
  background: url(https://music.163.com/style/web2/img/frame/playbar_8.png?
 904c92305ed99579afcff04d0c63709b) no-repeat 0 9999px;
 }
.volume {
  width: 25px;
  height: 25px;
  background-position: -2px -248px;
}
.volume:hover {
  background-position: -31px -248px;
}