当前位置：懒人建站 > 导航菜单 > 纯CSS中英文切换菜单(支持IE6a:hover)

纯CSS中英文切换菜单(支持IE6a:hover)

作者：佳明妈来源：懒人建站 2010-03-20 人气：

原理：利用a:hover来对其中元素进行隐藏显示。在a:hover{}写入任何属性来使IE6中的a:hover恢复正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>纯CSS中英文切换菜单(支持IE6a:hover)-懒人建站</title> 
<style type="text/css"> 
#nav ul{zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:#CCC;} 
#nav li{float:left;width:100px;height:30px;line-height:30px;text-align:center;} 
#nav a{color:#333;} 
#nav a .en{display:none;} 
#nav a:hover{display:block;background:#333;color:#CCC;} 
#nav a:hover .en{display:inline;} 
#nav a:hover .cn{display:none;} 
</style>

</head> 
<body> 
<div id="nav"> 
<ul>
<li><a href="#">首页Homepage</a></li>

<li><a href="#">新闻News</a></li> 
<li><a href="#">图片Picture</a></li>

<li><a href="#">下载Download</a></li>

<li><a href="#">留言Comment</a></li> 
</ul>
</div>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-

size:10pt; line-height:150%;">
本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理

我要学电脑.COM →51xuediannao.com</a> 
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a> 
我们为您提供-
<a href="http://www.51xuediannao.com/html+css/">HTML+CSS模板</a>，
<a href="http://www.51xuediannao.com/js/">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao/">网页特效</a>，
<a href="http://www.51xuediannao.com/JS/nav/">导航菜单</a>，
<a href="http://www.51xuediannao.com/JS/Slide/">焦点幻灯片<a>，
<a href="http://www.51xuediannao.com/JS/show/">网页欣赏</a>和
<a href="http://www.51xuediannao.com/JS/jiqiao/css/">CSS技巧</a>；
懒人建站只收录实用和能提高用户体验的代码
我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。
</div>
</body>
</html>

原理：在a:hover{}写入任何属性，color，font-size，overflow等等，甚至是不存在的属性，如zzz:tttt

，都可以使IE6中的a:hover恢复正常。

利用a:hover来对其中元素进行隐藏显示。

IE6下支持a:hover 属性以后，其他新版浏览器均默认支持。

↓ 查看全文

本文链接：纯CSS中英文切换菜单(支持IE6a:hover)https://www.51xuediannao.com/js/nav/ie6hover.html

纯CSS中英文切换菜单(支持IE6a:hover)由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：基于jquery的图文展示代码(九天音乐-9sky)
下一篇：漂亮的红色导航菜单

纯CSS中英文切换菜单(支持IE6a:hover)

纯CSS中英文切换菜单(支持IE6a:hover)-最新评论

导航菜单-热门文章

导航菜单-推荐文章

活跃用户

纯CSS中英文切换菜单(支持IE6a:hover)

纯CSS中英文切换菜单(支持IE6a:hover)-相关文章

纯CSS中英文切换菜单(支持IE6a:hover)-最新评论

导航菜单-热门文章

导航菜单-推荐文章

活跃用户