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

Question

所以我做了一个upvote / downvote按钮，我希望当有人在它上面时图像会改变。检查一下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>

Answer 2

您可以通过使用background-image设置初始图片而不是使用src来实现此目的。此外，由于无需输入标签，您只需使用<div>即可。

1. 制作您输入的div。
2. 将图像设置为backgroud-image。
3. 添加50px的高度;到.buttonup和.buttondown。
＆＃13;
＆＃13;
var counter = 1453, // Try change this what ever you want
  votePlus = counter + 1,
  voteMinus = counter - 1;

function checkIfUserVoted() {
  return localStorage.getItem("voted");
}
if (!localStorage.getItem("voted")) {
  localStorage.setItem("voted", counter);
  $("#count").text(counter);
}
$(".buttonup").click(function() {
  var vote = checkIfUserVoted() != votePlus ? votePlus : counter;
  localStorage.setItem("voted", vote);
  $(this).next().text(vote);
});
$(".buttondw").on('click', function () {
  var vote = checkIfUserVoted() != voteMinus ? voteMinus : counter;
  localStorage.setItem("voted", vote);
  $(this).prev().text(vote);
});
＆＃13;
#buttons{margin-left: 35%; margin-right:35%;}
.buttonup {
  padding: 0px;
  width: 50px;
  height: 50px;
  display: inline-block;
  cursor: pointer;
  margin-right: 0px;
  background-image: url('http://i.imgur.com/jWPUjR9.png');
}

#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;
  height: 50px;
  display: inline-block;
  cursor: pointer;
  margin-left: 0px;
  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")
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
<div type="image" class="buttonup" id="plus" style="vertical-align:middle"></div> <span id="count">1453</span>
<div type="image" class="buttondw" id="minus" style="vertical-align:middle"></div>
      
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

这是因为您正在尝试设置img元素的背景图像。这意味着除了显示原始图像外，它还会将背景设置为悬停图像。

您可以使原始按钮具有背景图像，也可以使用javascript更改<img>的来源。

试试此代码：https://fiddle.jshell.net/8gxhokL3/