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

html-css07

如何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

//这是让字体变为红色

}

4种。

鼠标滑过图片过渡动画特效,该特效中共有4种效果,分别是在鼠标滑过图片时图片产生过渡动画,展现图片标题的特效。

hover是css中的一种伪类选择器,指鼠标移入然后移出的过程,这个操作可以改变元素的样式,而且它相应的子类也被改变。

a

{

background: url('lala.jpg')

}

a:hover

{

background: url('lala_hover.jpg')

}

用 :hover 来更改css

如果需要更改位置用background-position也行