CSS实现鼠标经过显示图片并不困难,只需要使用:hover伪类和background-image属性即可。
<style> .image { width: 200px; height: 200px; background-image: url("default-image.png"); background-size: cover; } .image:hover { background-image: url("hover-image.png"); } </style>
上面的代码首先定义了一个class为image的div,宽高均为200px,使用了默认的图片default-image.png。然后,当鼠标悬停在该div上时,使用:hover伪类来改变该div的背景图片为hover-image.png。
需要注意的是,在使用background-image属性时,要使用cover来保证图片能够完全覆盖背景,否则图片可能被拉伸或不完整。