javascript - 在鼠标悬停时,在 JavaScript 中更改图片

标签 javascript html image

我的 HTML 代码中有一张图片,我想制作它以便当我的鼠标悬停在该图片上时,它会更改为另一张图片,并且当鼠标时将鼠标悬停在图像上,它会切换回默认设置。如何在 <script> 中对此进行编程标签?

最佳答案

没有<script>必要的标签。使用 onmouseover onmouseout 更改图像源。

onmouseover当您的鼠标经过图像时将执行一个 Action 。在这种情况下,我们使用 this.src将图像 src 设置为另一个图像。

onmouseout当您的鼠标离开图像 时将执行一个操作。在这种情况下,我们使用 this.src再次将图像设置为默认图像。

<img title="Hello" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681" onmouseover="this.src='https://www.ctvnews.ca/polopoly_fs/1.4037876!/httpImage/image.jpg_gen/derivatives/landscape_1020/image.jpg'" onmouseout="this.src='https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968h681'" />

关于javascript - 在鼠标悬停时,在 JavaScript 中更改图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54853648/

相关文章:

jquery - 使用 Stellar.js 视差插件时出现奇怪的位置问题

javascript - 在不影响标签属性和链接的情况下替换 html 标签中的文本

javascript - 范围绑定(bind)在模态弹出式 angularjs 中不起作用

windows - FFMPEG 在引用图像文件时使用了错误的参数

html - 无法让图像拉伸(stretch)全宽

javascript - 如何在javascript中生成螺旋矩阵?

javascript - 如何在 Angular 2 中获取 header 主体?

javascript - 使用 javascript 在页面加载之前隐藏 HTML 表单

javascript - 当只用 JS 悬停时,如何在我的网站上显示一个元素?

c# - 如何使用 Windows 窗体更改按钮上的图像?