这是一个完全用CSS实现的中英文双语导航菜单,无脚本和图片,初始时,菜单语言是英文,当鼠标悬停在菜单上时,其变成中文,当然你也可以反过来做。 实现原理: XHTML 从上面代码可以看出,中文放在 span 标签里,关键是需要在初始时,使其的属性不可见。 CSS .bi{ position: relative; z-index: 0; } .bi:hover{ z-index: 99; } .bi:hover span{ visibility: visible; top: 0; left: 0; cursor: pointer; } .bi span{ position: absolute; left: -999em; visibility: hidden; } #nav li a,.bi:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } #nav li a:hover,.bi:hover span{ color: #FFFFFF; background: #DC4E1B; } .bi:hover span{ padding-top: 2px; } 链接的属性是相对定位,那在此标签里的元素可将其作为参照点。 在 span 元素里的中文因其设定了不可见,所以在初始状态时,只能显示英文。而当鼠标悬停在菜单上时, span 元素里的设定变为可见,Z轴为99 ,覆盖在英文上面,从而实现了语言文字的转换。缺点:因为中英文字的长度关系,不能实现自适应宽度,只能固定宽度。 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 11:33 , Processed in 0.153493 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.