html - 如何仅使用 CSS 更改悬停时的图像源

Question

如何仅使用 CSS 更改悬停时的图像源

我试过但只能用javascript找到答案。

这是我的代码：

<img src="">

当用户鼠标悬停时，我想将图像更改为 1.gif。

标签： html

Answer 1

您可以先定位图像。然后当用户将鼠标悬停在图像上时，您可以从那里更改 src 属性

1. 目标图像。

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

2. 让鼠标悬停在这样的事件上

img.addEventListener('mouserover', callback);

3. 然后你像这样制作自己的功能

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

4. 鼠标移出时返回 1.gif 图像

img.addEventListener("mouseout", anotherCallback);

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