作者的blog :http://www.planabc.net/
老甘的《完全用CSS实现的中英文双语导航菜单》一文中使用“position: absolute;left: -999em;”将其左缩进N远,并通过“visibility: hidden;”将其物理隐藏(实际是占位的),此时显示英文导航。当hover触发时,z-index定义在上,并将其绝对定位位置设置为左上,设置visibility: visible;显示,此时span层覆盖在a层上,显示中文。
我们还可以还一种思维使用hover触发display属性实现:
CSS代码修改如下:
#nav li a,#nav li a:hover span { line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; overflow:hidden; }
#nav li a span { display:none; }
#nav a:hover { position: relative; }
#nav a:hover span { display:block; position:absolute; top: 0; left: 0; cursor: pointer; }
#nav a:hover span { padding-top:2px; }
#nav li a:hover,#nav li a:hover span { color: #FFFFFF; background: #DC4E1B; }
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
深入阅读:
《position:relative/absolute无法冲破的等级》 http://bbs.blueidea.com/thread-2720856-1-1.html
《IE中伪类:hover的使用及BUG》 http://bbs.blueidea.com/thread-2721472-1-1.html
经典论坛讨论: http://bbs.blueidea.com/thread-2722985-1-1.html 本文链接:http://www.blueidea.com/tech/web/2007/4510.asp |