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

html-css020

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

//这是让字体变为红色

}

有很多方法,给你提供两种简单的

1、在dreamweaver中,在“插入”菜单中有一个“图像对像”——“鼠标经过图像”,然后,在对话框选择两张图片就行了

2、利用css中的hover

hover

img {margin:*

*

*

*

}

*表示新的位置

按照你这样的布局是要配合js才可以的,还有你的html代码有点问题,不符合规范,一般都是<li>包含<a>的,你为什么不从html上解决呢?

像这样

<ul class="no_style_ul">

<li class="index"><a href="">首页</a></li>

</ul>

然后css像下面这样

<style>

.no_style_ul li.index{ float:leftwidth:宽height:高background:url(你的那张ico背景图) left center no-repeatpadding-left:你那张ico的宽+5px}

.no_style_ul li.index:hover{background:url(变了颜色的ico背景图) left center no-repeat}

</style>

这样就解决了

希望对你有所帮助!