CODEWITHSUNDEEP
csshtml
teh kc
teh kc

Reputation: 93

How to put the hover image above the original image

So i made a upvote/downvote button, i want the image to change when someone hover on it. Check this fiddle If you look closely, the image is changing when you over but it is behind the original image. How to fix it?

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")
}

Upvotes: 1

Views: 86

Answers (3)

Michael Zhang
Michael Zhang

Reputation: 1745

It's because you're trying to set the background-image of an img element. That means aside from displaying the original image, it will also set the background to the hover image.

You can either make the original button have a background image, or use javascript to change the source of the <img>.

Try this code: https://fiddle.jshell.net/8gxhokL3/

Upvotes: 1

Stickers
Stickers

Reputation: 78686

I suggest to use <button> + background image.

#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>

If you need one button at the top and one at the bottom, you can wrap each group into a 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>

Upvotes: 3

Hunter Turner
Hunter Turner

Reputation: 6894

You can achieve this by setting the initial image with background-image instead of using src. Also, since there is no need to have input tags, you can just use <div>'s.

  1. Make your input's divs.
  2. Set the images as backgroud-image.
  3. Add a height of 50px; to your .buttonup and .buttondown.

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);
});
#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")
}
<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>

Upvotes: 2

Related Questions