如何使用 HTML、CSS 和 JavaScript 更改悬停时的图像源？-css教程-PHP中文网

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

Patricia Arquette

发布： 2024-12-23 00:24:10

原创

637 人浏览过

How Can I Change an Image Source on Hover Using HTML, CSS, and JavaScript?

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

修改如何使用 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，您可以动态设置如何使用 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>

登录后复制

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