倾斜的鼠标翻转导航制作上的烦恼（3）
作者：小毅 来源：blueidea 发布时间：2007-06-20 16:39:00
我们这里看到其中并没有 #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;}
错误的效果：
运行代码框
正确的效果：
运行代码框
0
投稿猜你喜欢
- 试了一下，xmlDoc.save()行不同，就试着用fso做了出来。整理一下，供大家discuss。由于用js操作本地xml文件之后save
- 随着PHP4.0和JSP技术的推出以及IIS中不断出现的重大的安全问题，MicroSoft的ASP的市场仿佛是变的狭窄了，但是 MicroS
一、读写excel数据利用pandas可以很方便的读写excel数据1.1 读：data_in = pd.read_excel('M- 如果你使用过大部分，那么你的ASP功力应该是非常高的了ADO对象(太常用了)：ConnectionCommandRecordSetRecor
- var long2="1988-0w-07";alert(long2.substring(0,4)+"----
- 本文实例讲述了JS模拟简易滚动条效果的方法。分享给大家供大家参考，具体如下：使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。效果如下：
- 下面是一些有助于更有效地使用 SQL 事件探查器的提示和技巧。运行的跟踪过多如果 Microsoft? SQL Server? 实例运行得过
- 写在前面的话:此篇还是asp相关的,相信玩ASP的都有这个感觉,当数据有5万多条时-------just like音乐网,要调用最新的10条
- 在ORACLE中，我们可以通过file_id（file#）与block_id（block#）去定位一个数据库对象（object）。例如，我们
- 首先我们看看数组的分类： 从数组的下标分为索引数组、关联数组 /* 索引数组，即通常情况下所说的数组 */ var ary1 = [1,3,
- 要自动发微博最简单的办法无非是调用新浪微博的API（因为只是简单的发微博，就没必要用它的SDK了）。参考开发文档http://o
- 在上一篇文章《深入理解 go Mutex》中， 我们已经对 go Mutex 的实现原理有了一个大致的了解，也知道了 Mutex 可以实现并
- mysql安装目录使用MySQL AB's Linux RPM分发进行安装后，将在以下系统目录产生文件目录目录内容/usr/bin客
- 本文实例讲述了VB.NET调用MySQL存储过程并获得返回值的方法。分享给大家供大家参考。具体实现方法如下：Dim myConnection
- eval(String) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。返回值通过计算 string 得到的值（如果有的
- 错误的代码①d = {'a':1, 'b':0, 'c':1, 'd':0}
- 如图，以该猫咪图片为例（忽略水印）。将该文件命名为cat.jpg，并对其展开以下操作。使用PIL库进行灰度处理PIL库适合图像归档和图像批量
- 1，为了获取视频,你应该创建一个 VideoCapture 对象。他的参数可以是设备的索引号,或者是一个视频文件。设备索引号就是在指定要使用
- scrapy是用python开发的爬虫框架，从网上查了安装方法，感觉都说的挺复杂，而且很多教程都很有年头了，于是记录了自己的安装过程。首先安
- Flask-SQLAlchemy安装和建表操作请参考这里。 # Role表class Role(db.Model):
