不同的标签初始背景与滑过背景巧妙实现

以前在做导航条时,<a>标签都采用相同的初始背景与鼠标滑过背景.所以可以在CSS中写入总的效果CSS代码即可.如

a{

   background:url(bg1.jpg) no-repeat;

}

a:hover{

  background:url(bg11.jpg) no-repeat;

}

这样所有的<a>都采用了相同初始和鼠标滑过样式...

 

但如果几个不同的<A>标签,要采用不同的背景,用以上的方法就不行了.如有四个<A>标签,每一个的初始背景与鼠标滑过背景都不一样.那么就不能用以上的统一设置方法了.必须对每个<A>采用单独的,不同的设置..

 

我的实现方法为,把每个<A>标签,用<SPAN></SPAN>括起来,然后给<SPAN>设置class属性,如第一个<A>的设置为:

 

<span class="first"><a href="1.htm">1111</a></span>

 

然后对此写上CSS代码(可以是页内样式,也可以是外部文件样式)如下:

 

.first{

   ......(省略的样式设计)

}

.first a{

   background:url(bg1.jpg) no-repeat;

}

.frist a:hover{

   background:url(bg11.jpg) no-repeat;

}

以上设置意思为:first样式中的<a>初始图片和鼠标滑过图片.

同理对第二个,第三个,第四个这样处理.如:

<span class="second"><a href="2.htm">2222</a></span>

 

.second{

   ......(省略的样式设计)

}

.seconda{

   background:url(bg1.jpg) no-repeat;

}

.seconda:hover{

   background:url(bg11.jpg) no-repeat;

}

第三个......

第四个......

 

这样就很巧妙的解决了,不同<A>标签的不同图片样式..