发新贴  快速回复

二级菜单显示隐藏加图片和不加图片的问题。。。

  hforlove
2013-05-23 17:35
 本帖最后由 好豪好豪 于 2013-5-23 17:49 编辑 

在ie下加了张图片,鼠标移到二级菜单空白的地方就会隐藏,不加图片就没问题

[html]<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
.box span{ display:block; width:200px; height:auto; display:none; position:absolute; left:0; top:30px; overflow:hidden;}
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
    var box=document.getElementById('box');
    var span=box.getElementsByTagName('span')[0];
    
    box.onmouseover=function(){
        span.style.display='block';
    }
    box.onmouseout=function(){
        span.style.display='none';
    }
}
</script>
<title>无标题文档</title>
</head>

<body>
<div class="cont">
    <div id="box" class="box">
        一级
        <span>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
        </span>
    </div>
    
    <!--加图片后出问题-->
    <div class="bg"><img src="http://bbsimg.meizu.net/month_1106/20110628_feeb19e20c33634823a64YL1wIKpd6re.jpg" /></div>
</div>
</body>
</html>
[/html]<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
.box span{ display:block; width:200px; height:auto; display:none; position:absolute; left:0; top:30px; overflow:hidden;}
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
    var box=document.getElementById('box');
    var span=box.getElementsByTagName('span')[0];
    
    box.onmouseover=function(){
        span.style.display='block';
    }
    box.onmouseout=function(){
        span.style.display='none';
    }
}
</script>
<title>无标题文档</title>
</head>

<body>
<div class="cont">
    <div id="box" class="box">
        一级
        <span>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
        </span>
    </div>
    
    <!--加图片后出问题-->
    <div class="bg"><img src="http://bbsimg.meizu.net/month_1106/20110628_feeb19e20c33634823a64YL1wIKpd6re.jpg" /></div>
</div>
</body>
</html>
problue
[html]<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
ul{width:200px; height:auto; display:none; position:absolute; left:0; top:30px;overflow:hidden; list-style:none;z-index:999; }
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden; z-index:998;background-image:url(20110628_feeb19e20c33634823a64YL1wIKpd6re.jpg);}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
        var box=document.getElementById('box');
        var span=document.getElementsByTagName('ul')[0];
        
        box.onmouseover=function(){
                span.style.display='block';
        }
        box.onmouseout=function(){
                span.style.display='none';
        }
}
</script>
<title>无标题文档</title>
</head>
<body>
<div class="cont">
<div id="box" class="box"> 一级</ div>
  <div class="bg"></div>
  <ul>
    <li><a href="#">二级</a></li>
    <li><a href="#">二级</a></li>
    <li><a href="#">二级</a></li>
    <li><a href="#">二级</a></li>
  </ul>
</div>
</body>
</html>
[/html]
2013-05-24 14:27  回复本帖
 
hforlove
problue 发表于 2013-5-24 14:27 forum.php?mod=redirect&goto=findpost&pid=19610&ptid=6809
[html]




可以是可以了,不过还没解决我问的问题
2013-05-24 15:17  回复本帖
 
hforlove
{:soso_e101:}
2013-05-26 19:38  回复本帖
problue
 本帖最后由 problue 于 2013-5-26 21:25 编辑 

要理解W3C标准所说的:onmouseover和onmouseout是关于鼠标的一对事件,当鼠标指针悬停于某元素之上时,就是onmouseover;此时再移出某元素时,就是onmouseover。
上面的主要代码表示,你布局了这一文档结构:box嵌套span(不知道这设计是否好)、给box设置了事件处理。
不过要清楚:你的box元素可见的部分即它的display为block的部分就只为(200x30)px ───这就是问题存在的地方─── 对于onmouseout事件来说,当你移出这个尺寸范围它就发生。
2013-05-26 21:03  回复本帖
 
hforlove
problue 发表于 2013-5-26 21:03 forum.php?mod=redirect&goto=findpost&pid=19649&ptid=6809
要理解W3C标准所说的:onmouseover和onmouseout是关于鼠标的一对事件,当鼠标指针悬停于某元素之上时,就是 ...

那为什么不加图片,onmouseout移出就不会发生呢?
2013-05-26 21:30  回复本帖
 
创美易-miaov
 本帖最后由 创美易-miaov 于 2013-5-30 00:24 编辑 

是不是这种效果啊?

[html]<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul,li{
padding: 0;
margin: 0;
ist-style:none;
}
p{
line-height: 32px;
cursor: pointer;
}
li{
background: #a4a18f;
margin-bottom: 10px;
}
ul{
display: none;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aP=document.getElementsByTagName('P')[0];
var aUl=document.getElementsByTagName('ul')[0];
var timer=null;

aUl.onmouseover=aP.onmouseover=function(){
clearTimeout(timer);
aUl.style.display='block';
};
 aUl.onmouseout=aP.onmouseout=function(){
clearTimeout(timer);
timer=setTimeout(function(){
aUl.style.display='none';
},2000)
}
}
</script>
</head>

<body>
<p>123</p>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>

</body>
</html>[/html]
2013-05-28 10:17  回复本帖
 
创美易-miaov
好豪好豪 发表于 2013-5-26 21:30 forum.php?mod=redirect&goto=findpost&pid=19650&ptid=6809
那为什么不加图片,onmouseout移出就不会发生呢?

为什么我发的运行框,点击运行代码,都不能运行的啊?你看看我发的,运行不了。
2013-05-28 10:19  回复本帖
 
hforlove
老师,来打救下
2013-05-28 17:49  回复本帖
广西门户网→Lai
二级菜单显示隐藏加图片和不加图片 你这个的意思是不是显示二级菜单的时候加图片,二级菜单隐藏的时候图片跟着隐藏,,这样的话 通过class获取bg元素,然后当鼠标触碰到一级的时候让bg的display:block 移出的时候为none。。不知道你是这个意思嘛
2013-05-29 10:51  回复本帖
广西门户网→Lai
如果是你那个说也可以这样弄<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
.box span{ display:block; width:200px; height:auto; display:none; position:absolute; left:0; top:30px; overflow:hidden;}
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden; display:block;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
        var box=document.getElementById('box');
        var span=box.getElementsByTagName('span')[0];
        var oImg = document.getElementById('img');

        box.onmouseover=function(){
                span.style.display='block';
                oImg.style.display='block';
        }
        box.onmouseout=function(){
                span.style.display='none';
                oImg.style.display='none';
        }
}
</script>
<title>无标题文档</title>
</head>

<body>
<div class="cont">
    <div id="box" class="box">
        一级
        <span>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
        </span>
    </div>
    
    <!--加图片后出问题-->
    <div id="img" class="bg"><img src="http://bbsimg.meizu.net/month_1106/20110628_feeb19e20c33634823a64YL1wIKpd6re.jpg" /></div>
</div>
</body>
</html>
2013-05-29 11:01  回复本帖
 
hforlove
加图片
[html]<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
.box span{ display:block; width:200px; height:auto; display:none; position:absolute; left:0; top:30px; overflow:hidden;}
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
        var box=document.getElementById('box');
        var span=box.getElementsByTagName('span')[0];
        
        box.onmouseover=function(){
                span.style.display='block';
        }
        box.onmouseout=function(){
                span.style.display='none';
        }
}
</script>
<title>无标题文档</title>
</head>

<body>
<div class="cont">
    <div id="box" class="box">
        一级
        <span>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
        </span>
    </div>
    
    
    <div class="bg"><img src="http://bbsimg.meizu.net/month_1106/20110628_feeb19e20c33634823a64YL1wIKpd6re.jpg" /></div>
</div>
</body>
</html>[/html]

不加图片
[html]<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
.box span{ display:block; width:200px; height:auto; display:none; position:absolute; left:0; top:30px; overflow:hidden;}
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
        var box=document.getElementById('box');
        var span=box.getElementsByTagName('span')[0];
        
        box.onmouseover=function(){
                span.style.display='block';
        }
        box.onmouseout=function(){
                span.style.display='none';
        }
}
</script>
<title>无标题文档</title>
</head>

<body>
<div class="cont">
    <div id="box" class="box">
        一级
        <span>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
            <a href="#">二级</a>
        </span>
    </div>
    
    
    <div class="bg"></div>
</div>
</body>
</html>[/html]

你两个都运行下就知道问题了
2013-05-29 12:06  回复本帖
无为
加个定时器就可以了,不知道你这样写的目的是什么? 如果图片是要做背景的,为什么不直接给box做背景?

[html]<!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>
<style type="text/css">
*{ padding:0; margin:0;}
.cont{ width:200px; height:auto; margin:100px auto;}
.box{ width:200px; height:30px; text-align:center; line-height:30px; background:#CCCCCC; position:relative; z-index:999; }
.box span{ display:block; width:200px; height:auto; display:none; position:absolute; left:0; top:30px; overflow:hidden;}
.box a{ display:block; width:200px; height:28px; margin-top:20px; background:#099; color:#fff;}
.bg{ width:200px; height:200px; overflow:hidden;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
window.onload=function(){
var box=document.getElementById('box');
var span=box.getElementsByTagName('span')[0];
var timer = null;

box.onmouseover=function(){
clearTimeout(timer);
span.style.display='block';
}
box.onmouseout=function(){
timer = setTimeout(function(){
span.style.display='none';

},300);
}
}
</script>
<title>无标题文档</title>
</head>

<body>
<div class="cont">
<div id="box" class="box">
一级
<span>
<a href="#">二级</a>
<a href="#">二级</a>
<a href="#">二级</a>
<a href="#">二级</a>
</span>
</div>


<div class="bg"><img src="http://bbsimg.meizu.net/month_1106/20110628_feeb19e20c33634823a64YL1wIKpd6re.jpg" /></div>
</div>
</body>
</html>[/html]
2013-05-29 14:31  回复本帖
无为
创美易-miaov 发表于 2013-5-28 10:19 forum.php?mod=redirect&goto=findpost&pid=19653&ptid=6809
为什么我发的运行框,点击运行代码,都不能运行的啊?你看看我发的,运行不了。 ...

去掉所有的缩进,运行代码功能有制表符的时候会有问题。
2013-05-29 14:33  回复本帖
 
hforlove
无为 发表于 2013-5-29 14:31 forum.php?mod=redirect&goto=findpost&pid=19692&ptid=6809
加个定时器就可以了,不知道你这样写的目的是什么? 如果图片是要做背景的,为什么不直接给box做背景?

[h ...

这是什么问题造成的??
菜单栏下面经常都会有banner的嘛,这样的话二级菜单如果有空隙的话还是会隐藏的,加定时器还是不保险

2013-05-29 16:42  回复本帖
 
JamesTan
 本帖最后由 JamesTan 于 2013-5-29 23:36 编辑 

问题来自 移动到图片上 就会触发box 移出事件

我的解决方案 把图片设置为背景图片

当然 你非要问为什么 我也不太清楚
就像 为什么IE6会出现 在float元素后的元素,会有3px间隔一样


2013-05-29 23:19  回复本帖
无为
好豪好豪 发表于 2013-5-29 16:42 forum.php?mod=redirect&goto=findpost&pid=19703&ptid=6809
这是什么问题造成的??
菜单栏下面经常都会有banner的嘛,这样的话二级菜单如果有空隙的话还是会隐藏的 ...

这种菜单效果就是通过加定时器来处理的。保不保险你试试不就知道了。
2013-05-30 00:19  回复本帖
登录 后才可以发表回复