The "hover" pseudo-class is used to select and apply styles to an HTML element when a user hovers their mouse over it.
Changing an image on hover with CSS is a simple process that can add an extra layer of interactivity to the website. Here, we will learn step-by-step guide to changing an image on hover with CSS −
使用CSS在悬停时更改图像的第一步是拥有您想要使用的两个图像：默认图像和悬停图像。确保这两个图像都保存在您的网站上，并且您知道每个图像的URL。
使用img标签并指定图像的源（src）。例如 -
立即学习“前端免费学习笔记（深入）”；
@@##@@
In the CSS file, we add a rule to change the image on hover. we will do this by targeting the div tag and specifying a :hover pseudo-class. For example −
img:hover {
content: url("hover-image.jpg");
}
Here is an example to change the image on hover using CSS.
<html>
<head>
<title>Change Image on Hover in CSS</title>
<style>
body{
text-align:center;
}
div {
width: 250px;
height: 195px;
background:
url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") norepeat;
display: inline-block;
}
div:hover {
background:
url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat;
}
</style>
</head>
<body>
<h2>Change Image on Hover Using CSS</h2>
<div class="card"></div>
</body>
</html>
使用CSS在悬停时更改图像是一种简单而有效的方式，可以为网站增加额外的参与度。这是一个很好的方式来为用户创建互动体验，可以帮助他们更长时间地停留在网站上，提高他们的整体满意度。
以上就是如何使用 CSS 更改悬停时的图像？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1000
