How can i change image source on hover with only CSS

Question

i tried but was able to find only answers with javascript.

this is my code:

<img src="">

i want to change image to 1.gif when user mouse hover it.

Does this answer your question? [CSS: Change image src on img:hover](https://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover) — Maximillian Laumeister, Dec 01 '19 at 18:40

score 0 · Accepted Answer · answered Dec 01 '19 at 18:48

you can target the image first. and then from there when user mouser over the image you can change src attribute

target image.

const img = document.getElementById('imgId');

make mouser over event like this

img.addEventListener('mouserover', callback);

then you make your own function like this

function callback(event) {
    if (img.src=== '1.gif') {
       img.src = '2.gif';
    }
}

return the 1.gif image when the mouseout

img.addEventListener("mouseout", anotherCallback);

function anotherCallback(event) {
    if (img.src !== "1.gif") {
        img.src = '1.gif';
    } 
}

How can i change image source on hover with only CSS

1 Answers1