解决 div：hover在IE6不支持的方案

baobaoupup

浏览: 468911 次

最近访客更多访客>>

u012363178

shang226

lord_is_layuping

pangfei2001

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (853)

社区版块

存档分类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ldh_web_editor </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="mfx.css" rel="stylesheet" type="text/css">
<script src="mfx.js"></script>
<style>
ul{
background:url(http://img1.cache.netease.com/cnews/img09/sprites_jpg.jpg) repeat 0 -153px;
height:30px;
padding:0 20px;
border:1px solid #3399FF;
margin:0px;
}
li{list-style-type:none}
.menu li{
position:relative;
float:left;
width:100px;
font-size:14px;
line-height:30px;
}
.menu li a{color:#fff; text-decoration:none; }
.menu div{
display:none;
float:left;
border:1px solid #0099FF;
background:#E1EEF7;
position:absolute;
left:0;top:26px;
width:120px;
}
.menu ul li{
margin:0px;
width:100%;
}
.menu .hover div {
display:block;
}
.menu div a{
color:#666;
text-decoration:none;
font-size:12px;
display:block;
padding:5px;
width:100%;
line-height:18px;
}
.menu div a:hover{
color:#fff;
background:#0033CC;
}
.google{
height:500px;
background:#eee;
border:1px solid #aaa;
}
</style>
<script>
IE6hover=function (el,haverClass){
haverClass=haverClass||'hover';
el.onmouseout=function (){
this.className=this.className
.replace(new RegExp('(^|//s)' + haverClass + '(?=//s|$)','g'),'')
.replace(/^/s+|/s+$/,'')
.replace(//s+/,' ');
}
el.onmouseover=function (){
el.onmouseout();
this.className+=' '+haverClass;
};
};
window.onload = function (){
var lis=document.getElementsByTagName("LI");
for (var i=0;i<lis.length;++i ) IE6hover(lis[i])
}
</script>
</head>
<body>
<ul class="menu">
<li><a href="">最新</a>
<div>
<a href="" title="">手机不要钱</a>
<a href="" title="">说话不算数</a>
<a href="" title="">做梦</a>
<a href="" title="">真的不骗你</a>
</div>
</li>
<li><a href="">排行</a>
<div>
<a href="" title="">日志</a>
<a href="" title="">空间</a>
<a href="" title="">信春哥</a>
<a href="" title="">不挂科</a>
</div>
</li>
<li><a href="">国内</a>
<div>
<a href="" title="">没大事</a>
<a href="" title="">下点小雨</a>
<a href="" title="">刮点台风</a>
<a href="" title="">呆会下雪</a>
</div>
</li>
<li><a href="">军事</a>
<div>
<a href="" title="">美国打仗了</a>
<a href="" title="">不明</a>
<a href="" title="">有外星生物攻击</a>
<a href="" title="">谁说了算</a>
</div>
</li>
<li><a href="">蓝色论坛</a>
<div>
<a href="" title="">JS</a>
<a href="" title="">服务器</a>
<a href="" title="">设计帅</a>
<a href="" title="">理想</a>
</div>
</li>
</ul>
<div class="google"></div>
</body>
</html>