<!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>
selectoption
<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>
selectoption
再者.要狠狠的吐槽!!!ok.下面给你解决问题的办法.开始得到的结果是option在IE中的onmouseover事件并不会响应,但FF可以。所以准备给你找 jquery用ul模拟表单select列表菜单效果.
用 jquery select给你整理好后.
准备贴.又从上到下认真了看了一遍代码.
尼玛你的CSS啊.
float 怎么与 postion 一起用 ???
<!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>
$(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标签就会自动隐藏,没法下拉了!!!!!
还是很谢谢楼上的大哥,我是小菜鸟,太多东西不懂了