css鼠标移入切换图片
时间: 2023-10-09 13:07:07 浏览: 145
鼠标移上去换图片
可以使用:hover伪类和background-image属性来实现鼠标移入切换图片的效果,代码如下:
HTML:
```
<div class="image"></div>
```
CSS:
```
.image {
width: 200px;
height: 200px;
background-image: url("image1.jpg");
background-size: cover;
transition: background-image 0.3s ease-in-out;
}
.image:hover {
background-image: url("image2.jpg");
}
```
在上面的代码中,我们创建了一个div元素,并将其设置为200x200像素的正方形。我们使用background-image属性将image1.jpg设置为div的背景图像,并使用background-size:cover属性将其自适应至div的大小。我们还使用transition属性为背景图像添加了一个平滑的过渡效果。
当鼠标悬停在div上时,我们使用:hover伪类将背景图像更改为image2.jpg。由于我们为背景图像添加了一个过渡效果,因此图像切换将平滑进行,而不会出现突兀的闪烁效果。
阅读全文