我又來了,想把問題搞明白不想不求甚解
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0; padding:0; list-style-type:none;}
nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
#A li{width:40px; height:40px; float:left; padding-left:20px;}
#B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
</style>
</head>
<body>
<nav onmouseout="xi()">
<ul id="A">
<li onmouseover="show(0)">首頁1</li>
<li onmouseover="show(1)">男裝2</li>
<li onmouseover="show(2)">女裝3</li>
<li onmouseover="show(3)">熱賣4</li>
</ul>
<ul id="B" onmouseout="show2()" onmouseover="show3()">
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
<li>商品4</li>
</ul>
</nav>
</body>
<script>
var a=document.getElementById('A').getElementsByTagName('li');
var b=document.getElementById('B').getElementsByTagName('li');
function show(m){
b[m].style.display='block';
b[m].style.left=a[m].offsetLeft+'px';
}
function xi(){
for(var i=0;i< b.length;i++){
b[i].style.display='none';
}
}
window.setTimeout('xi()',1000);
function show2(){
for(var i=0;i< b.length;i++){
b[i].style.display='none';
}
}
</script>
</html>
我認為鼠標離開B, B才會消失, 因為B是nav裡的元素啊
但是事實是鼠標一離開nav B就消失了
, 我看別人那麼寫的都可以啊 我的為什麼不行了.... - -!好憂桑
(我也知道nav的height是40px),
昨晚一位好心的網友給了我這個答案讓我參考:
onmouseout事件過於敏感,所以通過setTimeout事件來延遲事件的執行就好了.
someElement.onmouseout = function () {
// ch在函數頂端已經var過了
ch = setTimeout("something", 100);
};
(if (ch) {
clearTimeout(ch);
}
至於這個判斷要放在什麼地方,具體情況具體分析,不過大部分都是放在onmouseover事件的頂部
)
我覺得思路很棒啊,但是不知道怎麼用進去
someElement是什麼意思啊?
謝謝大家了
解決不了問題很苦惱啊 = =!
*{margin:0; padding:0; list-style-type:none;}
nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
#A li{width:40px; height:40px; float:left; padding-left:20px;}
#B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
- 首頁1
- 男裝2
- 女裝3
- 熱賣4
- 商品1
- 商品2
- 商品3
- 商品4
var aALi=document.getElementById('A').getElementsByTagName('li');
var aBLi=document.getElementById('B').getElementsByTagName('li');
var timer = null;
function fnShowNav(m){
fnHideShop();
aBLi[m].style.display='block';
aBLi[m].style.left=aALi[m].offsetLeft+'px';
}
function fnHideShop(){
for(var i=0;i< aBLi.length;i++){
aBLi[i].style.display='none';
}
}
function fnOut(){
timer = setTimeout(fnHideShop,300);
}
function fnOver(){
clearTimeout(timer);
}
