|
我们这里看到其中并没有 #a a 这是因为#a a的显示内容就是当前内容，所以这句可以省了，由于#nav a中已经定义了背影图片了由于#nav a包括了#a a、#b a…，所以这里只要做好背景的位置就好了。再浏览一下，是正确了，但是还没有鼠标翻转的效果。下面再来把这个鼠标翻转的效果再补上：
#a a:hover {background-position: 0 -25px}
#b a:hover {background-position: -82px -25px;}
#c a:hover {background-position: -164px -25px;}
#d a:hover {background-position: -246px -25px;}
#e a:hover {background-position: -328px -25px;}
大家也看到了，这里也有很多重复的，可不可以再省略呢？如果只是针对IE流览器是可以的，因为IE在背景两个私有属性叫：background-positionX，background-positionY。但是Firefox与Opera都不支持，所以这里就不能省。基本上是成功了不过还有一个小细节，细心的朋友一定发现了，LI的位置移动是以79PX为一个单位，而图片则都是82PX的，链接也是82PX的大小。所以我们开头的#nav 的长度是错的，正常的是398px，为什么是398px那就自己想想算算吧！下面给出全部的CSS代码：
#nav {padding:0; margin:0; width:398px; height:25px; line-height:25px; overflow:hidden; list-style:none; position:relative;}
#nav li {width:82px; height:25px; position:absolute; top:0;}
#b {left:79px;}
#c {left:158px;}
#d {left:237px;}
#e {left:316px;}
#nav a {width:82px; height:25px; padding:30px 0 0 ; overflow:hidden; display:block; background:url(bg.gif) no-repeat;}
#b a {background-position: -82px 0px;}
#c a {background-position: -164px 0px;}
#d a {background-position: -246px 0px;}
#e a {background-position: -328px 0px;}
#a a:hover {background-position: 0 -25px}
#b a:hover {background-position: -82px -25px;}
#c a:hover {background-position: -164px -25px;}
#d a:hover {background-position: -246px -25px;}
#e a:hover {background-position: -328px -25px;}
错误的效果：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码]
正确的效果：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码]
来源：蓝色理想 作者：小毅
|
