JS关于mouseout事件在父亲元素与子元素之间的小问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

JS关于mouseout事件在父亲元素与子元素之间的小问题

2016-03-18 14:45:49 1904 1

我又来了,想把问题搞明白不想不求甚解

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

取消 提交回答
全部回答(1)
  • lflf
    2019-07-17 19:06:42

    你不是在nav上写了onmouseout="xi()" 么,也就是意味着鼠标移开,就会调用xi,xi隐藏了所有的节点呀

    0 0
相关问答

12

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 66286浏览量 回答数 12

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 159512浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 96091浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 148605浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 147601浏览量 回答数 31

82

回答

OSS入门教程

belle.zhoux 2014-07-07 17:14:27 158546浏览量 回答数 82

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 86393浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81537浏览量 回答数 13

1

回答

ADB没有显示表组,这对RDS多库表同步到ADB后,会无法在Quick BI中识别

游客5votb3rqwkucq 2019-07-02 11:57:49 113182浏览量 回答数 1

15

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 69190浏览量 回答数 15
2735
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载