JS关于mouseout事件在父亲元素与子元素之间的小问题,求解了 ,谢谢

zaxlctjs 2015-08-16 07:02:24

<!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是什么意思啊?
谢谢大家了
解决不了问题很苦恼啊 = =!

...全文

349 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

zaxlctjs 2015-08-17

打赏
举报

自己顶一下,谢谢大家的回答

人生难得一只鸡 2015-08-16

打赏
举报

也许你想要这样的效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
    *{margin:0; padding:0; list-style-type:none;}
   .nav{height:28px;margin:0 auto;width:200px;}
   .nav li.menu-s{position:relative; line-height:28px;float:left;padding-right:10px;}
   .sub{ position:absolute; display:none; top:28px; background:#000;color:#fff; width:50px;}
   a{ text-decoration:none;}
</style>
</head>
<body>
<ul class="nav" id="nav">
	<li class="menu-s">
    	<a href="#">首页</a>
        <ul class="sub">
        	<li>首页1</li>
        </ul>
    </li>
    	<li class="menu-s">
    	<a href="#">男装</a>
        <ul class="sub">
        	<li>男装1</li>
            <li>男装2</li>
        </ul>
    </li>
    	<li class="menu-s">
    	<a href="#">首页</a>
        <ul class="sub">
        	<li>首页1</li>
        </ul>
    </li>
</ul>
</body>
<script>
    var ulNav=document.getElementById('nav');
    var aLi=ulNav.children;
    for(var i=0;i<aLi.length;i++)
	{
		aLi[i].onmouseover=function(){
			var subUl=this.getElementsByTagName('ul')[0];
			subUl.style.display='block';
		}
		aLi[i].onmouseout=function(){
			var subUl=this.getElementsByTagName('ul')[0];
			subUl.style.display='none';
		}
	}
</script>
</html>