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 −
Prepare the images
使用CSS在悬停时更改图像的第一步是拥有您想要使用的两个图像：默认图像和悬停图像。确保这两个图像都保存在您的网站上，并且您知道每个图像的URL。
将默认图像添加到您的HTML中
使用img标签并指定图像的源（src）。例如 –
立即学习“前端免费学习笔记（深入）”；
在你的CSS中添加一个悬停规则
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");}
Example
Here is an example to change the image on hover using CSS.
Change Image on Hover in CSS 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; }Change Image on Hover Using CSS
Conclusion
使用CSS在悬停时更改图像是一种简单而有效的方式，可以为网站增加额外的参与度。这是一个很好的方式来为用户创建互动体验，可以帮助他们更长时间地停留在网站上，提高他们的整体满意度。
以上就是如何使用 CSS 更改悬停时的图像？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625499.html
微信扫一扫 
支付宝扫一扫 
