css - 如何将悬停图像放在原始图像上方

Question

所以我制作了一个赞成票/反对票按钮，我希望当有人将鼠标悬停在上面时图像会发生变化。检查这个fiddle 如果你仔细观察，当你过去时，图像正在改变，但它在原始图像的后面。如何解决？

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<input type="image" class="buttonup" id="plus" style="vertical-align:middle" src="http://i.imgur.com/jWPUjR9.png" /> <span id="count">1453</span>
  <input type="image" class="buttondw" id="minus" style="vertical-align:middle" src="http://i.imgur.com/Vu6tuf9.png" />

</div>

CSS:

#buttons{margin-left: 35%; margin-right:35%;}
.buttonup {
 padding: 0px;
 width: 50px;
 cursor: pointer;
 margin-right: 0px;
}

#count {
display: inline-block;
border-radius: 0px;
background-color: #33cc33;
border: none;
color: #ffffff;
text-align: center;
font-size: 18px;
padding: 7px;
width: 50px;
margin-top: 0px;

 }

.buttondw {
width: 50px;
cursor: pointer;
margin-left: 0px;
} 

.buttonup:hover {
background-image: url("http://i.imgur.com/SFjZ9FD.png")
 }
.buttondw:hover {
background-image: url("http://i.imgur.com/aVAeO0F.png")
}

Answer 1

我建议使用 <button> + 背景图片。

#buttons {
  margin-left: 35%;
  margin-right: 35%;
}
#count {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0px;
  background-color: #33cc33;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 7px;
  width: 50px;
  margin-top: 0px;
}
.buttonup,
.buttondw {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: transparent;
  border: 0;
  vertical-align: middle;
}
.buttonup {
  background-image: url("http://i.imgur.com/jWPUjR9.png");
}
.buttondw {
  background-image: url("http://i.imgur.com/Vu6tuf9.png");
}
.buttonup:hover {
  background-image: url("http://i.imgur.com/SFjZ9FD.png");
}
.buttondw:hover {
  background-image: url("http://i.imgur.com/aVAeO0F.png");
}

<div id="buttons">
  <button class="buttonup" id="plus"></button> <span id="count">1453</span>
  <button class="buttondw" id="minus"></button>
</div>

如果你需要一个按钮在顶部，一个在底部，你可以将每组包装到一个 div 中。

<div id="buttons">
  <div>
    <button class="buttonup" id="plus"></button> <span id="count">1453</span>
  </div>
  <div>
    <button class="buttondw" id="minus"></button>
  </div>
</div>

#buttons {
  margin-left: 35%;
  margin-right: 35%;
}
#count {
  display: inline-block;
  vertical-align: middle;
  border-radius: 0px;
  background-color: #33cc33;
  border: none;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 7px;
  width: 50px;
  margin-top: 0px;
}
.buttonup,
.buttondw {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: transparent;
  border: 0;
  vertical-align: middle;
}
.buttonup {
  background-image: url("http://i.imgur.com/jWPUjR9.png");
}
.buttondw {
  background-image: url("http://i.imgur.com/Vu6tuf9.png");
}
.buttonup:hover {
  background-image: url("http://i.imgur.com/SFjZ9FD.png");
}
.buttondw:hover {
  background-image: url("http://i.imgur.com/aVAeO0F.png");
}

<div id="buttons">
  <div>
    <button class="buttonup" id="plus"></button> <span id="count">1453</span>
  </div>
  <div>
    <button class="buttondw" id="minus"></button>
  </div>
</div>