为什么鼠标移到select标签的option整个层都隐藏了？急，求高手调教，help！！！！！！

liyuhuazai2011 2013-04-22 03:27:58

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0;}
#one{ float:left; width:350px; height:20px;}
#two{ float:left; width:347px; height:312px; display:none; left:0; top:20px;position:absolute; border-left:none; border:#235FA5 solid 3px;}
#one_three{ width:80px; height:20px; margin:auto;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#one_three").hover(function(){
$("#two").show(function(){
$(this).mouseleave(function(e){
var o = e.relatedTarget || e.toElement;//判断下移动到的对象，移动到option上ie下是null，firefox等为undefined。。
if (!o) return;//为option退出不隐藏
$(this).hide();
});
});
});
$("#big").mouseleave(function(){
$("#two").hide();
});
});

</script>
</head>

<body>
<div id="big">
<div id="one" >
<div id="one_three">AAAAAAAA</div>
</div>
<div id="two">
<ul>
<li><a href="#">sdfsdfs</a></li>
<li><a href="#">sdfsdfs</a></li>
<li><a href="#">sdfsdfs</a></li>
</ul>
<select>
<option><a href="#">WWWWWWWWWW</a></option>
<option><a href="#">WWWWWWWWWW</a></option>
<option><a href="#">WWWWWWWWWW</a></option>
<option><a href="#">WWWWWWWWWW</a></option>
</select>
</div>
</div>
</body>
</html>

...全文

212 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

liyuhuazai2011 2013-04-23

打赏
举报

help!!!!!!!!!

liyuhuazai2011 2013-04-22

打赏
举报

我之前也是这样写的，但是后来发现鼠标没移到弹出来的层而且离开<div id="one_three">AAAAAAAA</div>这个位置的时候显示的层并没有隐藏，所以才出此下策，如果： $(document).ready(function(){ $("#one_three").hover(function () { $("#two").show(function () { $(this).mouseleave(function (e) { var o = e.relatedTarget || e.toElement; if (!o) return; //增加移动到的对象判断，为option时退出 $(this).hide(); }); }); $($("#big")).mouseleave(function () { $("#two").hide(); }); }); }); 这样写的话鼠标移开<div id="one_three">AAAAAAAA</div>这个位置弹出的层也会消失，但是在IE浏览器里鼠标碰到select里的option标签就会自动隐藏，没法下拉了!!!!!

还是很谢谢楼上的大哥，我是小菜鸟，太多东西不懂了

liyuhuazai2011 2013-04-22

打赏
举报

daswcszxw 2013-04-22

打赏
举报

贴上代码,最后的最后吐槽也是对我自己的不认真浪费了很多时间而吐槽.

daswcszxw 2013-04-22

打赏
举报

OK . 不废话了.


<!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 type="text/css">
*{ padding:0; margin:0;}
#one{width:350px; height:20px; background:#eee;}
#two{width:347px; height:312px; display:none; border-left:none; border:#235FA5 solid 3px;}
#one_three{ width:80px; height:20px; margin:auto;}
select,option,#one{cursor:pointer;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("#one_three").hover(function () {
            $("#two").show(function () {
                $(this).mouseleave(function (e) {
                    var o = e.relatedTarget || e.toElement;
                    if (!o) return; //增加移动到的对象判断，为option时退出
                    $(this).hide();
                });
            });
        });
});
</script>
</head>

<body>
<div id="big">
    <div id="one" >
    	<div id="one_three">AAAAAAAA</div>
    </div>
    <div id="two">
        <ul>
            <li><a href="#">sdfsdfs</a></li>
            <li><a href="#">sdfsdfs</a></li>
            <li><a href="#">sdfsdfs</a></li>
        </ul>
        <select id="ccc">
            <option><a href="#">WW2WWWW</a></option>
            <option><a href="#">WW3WWWW</a></option>
            <option><a href="#">WW4WWWW</a></option>
            <option><a href="#">WW5WWWW</a></option> 
        </select>
    </div>
</div>
</body>
</html>

daswcszxw 2013-04-22

打赏
举报

首先,我把你这个问题解决了. 再者.要狠狠的吐槽!!! ok.下面给你解决问题的办法. 开始得到的结果是option在IE中的onmouseover事件并不会响应，但FF可以。所以准备给你找 jquery用ul模拟表单select列表菜单效果. 用 jquery select给你整理好后. 准备贴. 又从上到下认真了看了一遍代码. 尼玛你的CSS啊. float 怎么与 postion 一起用 ???

用C语言写一个查单词的小demo #include <stdio.h> #include <string.h> #include <stdlib.h> int main(int argc, const char *argv[]) { // 用只读的方式打开我们的单词库 FILE *fp = fopen("dict.txt","r"); if (NULL == fp){ perror("fopen"); return -1

玩过游戏的同学应该很好理解，做从新手村出生之后，需要不断学习不同的技能，例如 “治疗”、“烹饪”、“锻造” 已经各种“攻击” 技能。我们可以将 Agent 看作新手村刚出生角色，配置了Skills 之后，就具备了专业领域 Agent 的能力。Agent 可通过加载不同的 Skills 包，来具备不同的专业知识、工具使用能力，稳定完成特定任务。Agent Skills 是一种轻量级的开放格式，旨在通过专业知识和工作流来扩展 AI 智能体的能力。从本质上讲，一个 Skill（技能）就是一个包含。

在软体开发时,通常都会面临到系统效能调教的需求,我们希望知道哪些区块的程式码或函式被执行的次数频繁,或是佔据较高的处理器时间,以便藉此优化程式码撰写的行为,或是改善耗CPU时间的算法,以Linux平台来说,OProfile(http://oprofile.sourceforge.net )会是一个大家常推荐的工具,OProfile支持Time-based透过系统Timer中断蒐集当下执行环境资讯,

什么是浏览器？浏览器就是接收浏览者的操作(打开一个网址点击一个链接点击一个按钮)，然后帮浏览者去Web服务器请求网页内容(HTML格式返回)，然后展现成人眼能够看得懂的可视化页面的软件。IE==浏览器？IE是浏览器的一种，还有FireFox Opera Chrome等，注意遨游(Maxthon) 世界之窗搜狗浏览器 360浏览器等并不是一种独立于IE的浏览器，其内核还是IE的内核

装上这些 IDEA 插件，让你飘飘欲仙！你就是这条街最靓的仔！