如何使用 HTML、CSS 和 JavaScript 更改悬停时的图像源？

使用 HTML、CSS 和 JavaScript 修改悬停时的图像源

修改 <img alt="如何使用 HTML、CSS 和 JavaScript 更改悬停时的图像源？" > 的源 URL

仅 CSS（Webkit 特定）

单独使用 CSS，您可以将图像替换为不同的 URL徘徊。但是，它仅适用于基于 Webkit 的浏览器，例如 Google Chrome：

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

使用 Div 背景图像

或者，您可以使用

悬停时替换背景图像的元素：

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

使用 JavaScript

使用 JavaScript，您可以动态设置 <img alt="如何使用 HTML、CSS 和 JavaScript 更改悬停时的图像源？" > 的来源。鼠标悬停和鼠标移出时的标记：

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img  alt="如何使用 HTML、CSS 和 JavaScript 更改悬停时的图像源？" >

以上是如何使用 HTML、CSS 和 JavaScript 更改悬停时的图像源？的详细内容。更多信息请关注PHP中文网其他相关文章！