css hover显示图片
时间: 2024-01-26 15:14:40 浏览: 130
jquery hover显示图片详细介绍
你可以使用CSS的:hover伪类来实现hover切换图片的效果。具体的做法是在:hover伪类下,通过修改元素的背景图或者content属性来切换图片。
以下是一个示例代码,展示了如何利用CSS实现hover切换图片效果:
```css
/* 默认状态下的图片 */
.img {
background-image: url("default.jpg");
width: 200px;
height: 200px;
}
/* hover状态下的图片 */
.img:hover {
background-image: url("hover.jpg");
}
```
在上述代码中,我们首先定义了一个类名为.img的元素,设置了默认状态下的背景图片为default.jpg。然后,在.img:hover伪类下,我们修改了背景图片为hover.jpg。当鼠标悬停在.img元素上时,就会触发:hover伪类,从而切换图片。
你可以根据自己的需求修改图片的路径和尺寸,以及其他样式属性。
阅读全文