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

最新推荐文章于 2024-07-07 23:10:31 发布

sikivitas

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： div ie function stylesheet border xhtml

本文链接：https://blog.csdn.net/sikivitas/article/details/5448240

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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.οnmοuseοut=function (){
  this.className=this.className
  .replace(new RegExp('(^|//s)' + haverClass + '(?=//s|$)','g'),'')
  .replace(/^/s+|/s+$/,'')
  .replace(//s+/,' ');
}
el.οnmοuseοver=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>

sikivitas

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
解决 div：hover在IE6不支持的方案

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> ldh_web_editor ul{ background:url(http://img1.cache.netease.com/cnews/img09/sprites_jpg.jpg) repeat 0 -153px; h
复制链接

扫一扫