首页html鼠标经过一个图片改变成另外一个

html鼠标经过一个图片改变成另外一个

时间: 2023-05-27 08:04:58 浏览: 84

可以使用CSS的:hover伪类和background-image属性来实现鼠标经过图片切换的效果。具体步骤如下： 1. 在HTML中插入一个img标签，设置它的class和src属性： ``` <img class="image" src="image1.jpg"> ``` 2. 在CSS中设置.image的样式，包括宽度、高度、背景图片和过渡效果： ``` .image { width: 200px; height: 200px; background-image: url('image1.jpg'); transition: background-image 0.5s ease; } ``` 3. 使用:hover伪类来设置鼠标经过时的样式，将背景图片改为另一张图片： ``` .image:hover { background-image: url('image2.jpg'); } ``` 完整的HTML和CSS代码如下： ``` <!DOCTYPE html> <html> <head> <title>Image Hover Effect</title> <style type="text/css"> .image { width: 200px; height: 200px; background-image: url('image1.jpg'); transition: background-image 0.5s ease; } .image:hover { background-image: url('image2.jpg'); } </style> </head> <body> <img class="image" src="image1.jpg"> </body> </html> ``` 当鼠标经过图片时，图片会平滑地过渡到另一张图片。你可以将image1.jpg和image2.jpg替换为你自己的图片。