有什么办法让鼠标离开列表依然显示
现在是鼠标移上去显示列表,但要鼠标经过列表的话,要经过空白之间,此时已经隐藏了列表了.有什么办法可以在空白出也不隐藏列表?
- HTML code
<!DOCTYPE HTML><html><head><title>soul42</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ><STYLE type="text/css"> * { margin:0; padding:0;} #box{width:30px;margin:200px auto 0 ;display:block;position:relative} ul{position:absolute;top:-202px;left:0;width:200px;} li{height:20px;background:orange;margin-bottom:1px}</STYLE></head><body> <div id="box">sd <ul style="display:none" id="list"> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> </ul> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id)} $("box").onmouseover = function(){ $("list").style.display = "block"; } $("box").onmouseout = function(){ $("list").style.display = "none"; } </script></body></html>[解决办法]
- HTML code
<!DOCTYPE HTML><html><head><title>soul42</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ><STYLE type="text/css"> * { margin:0; padding:0;} #box{width:30px;margin:200px auto 0 ;display:block;position:relative;} ul{position:absolute;top:-202px;left:0;width:200px;} li{height:20px;background:orange;margin-bottom:1px}</STYLE></head><body> <div id="box">sd <ul style="display:none" id="list"> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> <li>23</li> </ul> </div> <script type="text/javascript"> var tid = null; var $ = function(id){return document.getElementById(id)} $("box").onmouseover = function(){ $("list").style.display = "block"; } $("box").onmouseout = function(){ var obj = event.srcElement; if(tid!=null) clearTimeout(tid); tid = setTimeout(function(){$("list").style.display = "none"}, 1500); } $("list").onmouseover = function(){ if(tid!=null) clearTimeout(tid); } </script></body></html>
[解决办法]
1.改css把div和ul拼一起盖掉空白
2.给document加click关闭或者ul里加个关闭按钮