如何CSS的a:hover完成替换背景图片?

html-css026

如何CSS的a:hover完成替换背景图片?,第1张

可以在hover伪类中用background或者background-image实现。

例如:

页面上有一个

原本背景图为img1.png,当鼠标滑过则换为img2.png.

在CSS中这样定义

.div_style:hover{

background:

url("img2.png")

//这是改变背景色

background-repeat:

no-repeat

//这是让背景色不平铺

color:

red

//这是让字体变为红色

}

或者用

.div_style:hover{

background-image:

url("img2.png")

//这是改变背景色

background-repeat:

no-repeat//这是让背景色不平铺

color:red

//这是让字体变为红色

}

今天学习一个炫酷的小技能,纯纯css实现动态图标,hover之后静止在某一个图标。

Demo效果如下:

到这里我们的 HTML 文件就全部写完啦

这时候我们就可以得到一个图片的效果。

这里小图标总共有 11 张,相互之间的变化就是 10 步,所以动画设置如下

这样就得到了一个无限循环的逐帧动画

这样下来,默认就不会动了,然后在hover的时候“运行”就行了