Is it possible to use :hover to change an image?

Question

I've designed how my buttons would look in an external app and saved it as an image to use for my webpage, and I want to code the webpage so that when I hover over the button, it changes to the image of the button I've designed - is there a method to do this with html.css?

the current html code:

    <div class = 'comment'>
        <a href = "hidden_comments.html">
        <img src='commentbar.jpg', width=90px>
    </div>

the css code:

.comment{
    display: inline;
    margin-left: -10px;
}

score 0 · Answer 1 · edited Sep 05 '20 at 06:44

0

Yes it's possible. have :hover as selector on the element in css. And add background-image part of css, for example below:

div:hover{
  background-image: url("paper.gif");
}

edited Sep 05 '20 at 06:44

mplungjan

169,008
28
173
236

answered Sep 05 '20 at 06:37

Asutosh

1,775
2
15
22

I don't think it's working, is it because in the original code it's set as an image? – Amy sdj Sep 05 '20 at 07:05

score 0 · Answer 2 · answered Sep 05 '20 at 07:20

0

It is not recommended to use CSS hover to do it. You may want to change image dynamically and you can not do it with CSS.

Here you can find an exact solution

answered Sep 05 '20 at 07:20

ramilabbaszade

62
2
11

Is it possible to use :hover to change an image?

2 Answers2