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

时间:2019-12-01 18:31:15

标签: html

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

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

这是我的代码:

<img src="">

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

1 个答案:

答案 0 :(得分:0)

您可以先定位图像。然后从那里当用户将鼠标移到图像上时,您可以更改src属性

  1. 目标图片。
const img = document.getElementById('imgId');
  1. 将鼠标悬停在这样的事件上
img.addEventListener('mouserover', callback);
  1. 然后您像这样制作自己的函数
function callback(event) {
    if (img.src=== '1.gif') {
       img.src = '2.gif';
    }
}
  1. 将鼠标移出时返回1.gif图像
img.addEventListener("mouseout", anotherCallback);

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