关于onmouseover onmouseout的疑惑

<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type='text/css'>
body { margin:0; padding:0; }
ul,li { margin:0; padding:0; }
ul { list-style:none; }
ul li { float:left; line-height:36px; position:relative; border:1px solid #000; }
ul a { display:block; width:80px; }
ul li ul { position:absolute; left:0; display:none; }
</style>
</head><body>
<ul>
<li onmouseover='out(this)' onmouseout="ins(this)"><a href='#'>aa</a>
<ul>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
</ul>
</li>
<li onmouseover='out(this)' onmouseout='ins(this)'><a href='#'>aa</a>
<ul>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
</ul>
</li>
<li onmouseover='out(this)' onmouseout='ins(this)'><a href='#'>aa</a>
<ul>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
</ul>
</li>
<li onmouseover='out(this)' onmouseout='ins(this)'><a href='#'>aa</a>
<ul>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
<li><a href='#'>aa</a></li>
</ul>
</li>
</ul>
<script type='text/javascript'>
function out(obj) {
obj.getElementsByTagName('ul')[0].style.display = 'block';
}
function ins(obj) {
obj.getElementsByTagName('ul')[0].style.display = 'none';
}
</script>
</body>
</html>
当鼠标移入弹出的列表时，为什么不执行onmouseout呢，即为什么下拉列表不消失呢，javascript的onmoseover和onmouseout不是设计的有错误吗，即当鼠标移入子元素内部时仍然会执行onmouseout事件

解决方案 »

  1.   

    下拉列表 也是在 外面那层li里面，你并没有 离开 外面的li 打个比方 没有列表出现的时候 li的高度 是30px； 有了可能变成100px 你的鼠标还在外层的li 上悬停 就不会触发onmouseout
      

  2.   

    可是你看看下面的又做何解释呢？html部分：
    XML/HTML code
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9

    <div class="Defautl-Navigation" style="width: 70px; cursor: pointer;">
        <a onmouseover="over('Conf');" onmouseout="out(Conf);" href="javascript:return false;">配置</a>
    </div>
    <div id="Conf" style="overflow: hidden; border: #51789b 2px solid; display: none;
        filter: alpha(Opacity=90); left: 530px; float: left; width: 1px; position: absolute;
        top: 14px; left: 390px; height: 1px; background-color: #444; -moz-opacity: 0.9;
        text-align: left;" onmousemove="Tover();" onmouseout="Tout();">
        No Content
    </div>javascript部分：
    JavaScript code
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50

    var _f = 0;
    var y = 0;
    var div_obj
    function over(obj) {
    //debugger;
        div_obj = obj
        _f = 0;
        y = 0;
        document.getElementById(obj).innerHTML = "";
        document.getElementById(obj).style.width = "0px";
        document.getElementById(obj).style.height = "1px";
        document.getElementById(obj).style.display = "";
        timerDIV();
    }
    function out(obj) {
        obj.style.display = "none";
    }
    function Tout() {
        document.getElementById(div_obj).style.display = "none";
    }
    function Tover() {
        document.getElementById(div_obj).style.display = "";
    }
    function timerDIV() {
        if (_f >= 205) {/*宽度*/
            objy();
            return;
        }
        else {
            _f = _f + 10;
            document.getElementById(div_obj).style.width = _f + "px";
            window.setTimeout(timerDIV, 1);
        }
    }
    function objy() {
        if (y >= 230) {/*高度*/
            var str = "<div style=\"width:205px;height:auto;float:left;font-size:12px;margin:6px 0px 6px 12px;line-height:20px\">";
            str += "<a              href=\"javascript:GoToPage('aaa');\">Downstream                 </a><br/>";
            str += "<a                href=\"javascript:GoToPage('bbb');\">Upstream                   </a><br/>";
            str += "<a              href=\"javascript:GoToPage('ccc');\">Load Balancing             </a><br/>"; 
            str += "</div>";
            document.getElementById(div_obj).innerHTML = str;
            return;
        }
        else {
            y += 6;
            document.getElementById(div_obj).style.height = y + "px";
            window.setTimeout(objy, 1);
        }
    }
      

  3.   

    你没明白我意思 这个时候 你的 显示和隐藏容器 是 Conf 对吧，他不唉a里面
      

  4.   

    你a元素 的占的空间不包含 Conf  就不会音响到 效果，上面哪个demo 是因为 你的在父元素上触发 显示和隐藏子元素 但是 子元素在父元素的容器里 你鼠标放在子元素上 子元素在父元素里面 所以还是触发了 onmouseover
      

  5.   

    <!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>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    var _f = 0;
    var y = 0;
    var div_obj
    function over(obj) {
    //debugger;
        div_obj = obj
        _f = 0;
        y = 0;
        document.getElementById(obj).innerHTML = "";
        document.getElementById(obj).style.width = "0px";
        document.getElementById(obj).style.height = "1px";
        document.getElementById(obj).style.display = "";
        timerDIV();
    }
    function out(obj) {
        //obj.style.display = "none";
    }
    function Tout() {
        document.getElementById(div_obj).style.display = "none";
    }
    function Tover() {
        //document.getElementById(div_obj).style.display = "";
    }
    function timerDIV() {
        if (_f >= 205) {/*宽度*/
            objy();
            return;
        }
        else {
            _f = _f + 10;
            document.getElementById(div_obj).style.width = _f + "px";
            window.setTimeout(timerDIV, 1);
        }
    }
    function objy() {
        if (y >= 230) {/*高度*/
            var str = "<div style=\"width:205px;height:auto;float:left;font-size:12px;margin:6px 0px 6px 12px; line-height:20px\">";
            str += "<a              href=\"javascript:GoToPage('aaa');\">Downstream                 </a><br/>";
            str += "<a                href=\"javascript:GoToPage('bbb');\">Upstream                   </a><br/>";
            str += "<a              href=\"javascript:GoToPage('ccc');\">Load Balancing             </a><br/>"; 
            str += "</div>";
            document.getElementById(div_obj).innerHTML = str;
            return;
        }
        else {
            y += 6;
            document.getElementById(div_obj).style.height = y + "px";
            window.setTimeout(objy, 1);
        }
    }
    $(function() {
        $('#Conf').mouseleave(function() {
        $(this).css({display: 'none'});                             
    });           
    });
    </script>
    </head>
     
    <body>
    <div class="Defautl-Navigation" style="width: 70px; cursor: pointer;">
        <a onmouseover="over('Conf');" onmouseout="out(Conf);" href="#">配置</a>
    </div>
    <div id="Conf" style="overflow: hidden; border: #51789b 2px solid; display: none;
        filter: alpha(Opacity=90); left: 530px; float: left; width: 1px; position: absolute;
        top: 14px; left: 390px; height: 1px; background-color: #444; -moz-opacity: 0.9;
        text-align: left;">
        No Content
    </div>
    </body>
    </html>看看这个呢？
      

  6.   

    <!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>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    var _f = 0;
    var y = 0;
    var div_obj
    function over(obj) {
    //debugger;
        div_obj = obj
        _f = 0;
        y = 0;
        document.getElementById(obj).innerHTML = "";
        document.getElementById(obj).style.width = "0px";
        document.getElementById(obj).style.height = "1px";
        document.getElementById(obj).style.display = "";
        timerDIV();
    }
    function out(obj) {
        //obj.style.display = "none";
    }
    function Tout() {
        document.getElementById(div_obj).style.display = "none";
    }
    function Tover() {
        //document.getElementById(div_obj).style.display = "";
    }
    function timerDIV() {
        if (_f >= 205) {/*宽度*/
            objy();
            return;
        }
        else {
            _f = _f + 10;
            document.getElementById(div_obj).style.width = _f + "px";
            window.setTimeout(timerDIV, 1);
        }
    }
    function objy() {
        if (y >= 230) {/*高度*/
            var str = "<div style=\"width:205px;height:auto;float:left;font-size:12px;margin:6px 0px 6px 12px; line-height:20px\">";
            str += "<a              href=\"javascript:GoToPage('aaa');\">Downstream                 </a><br/>";
            str += "<a                href=\"javascript:GoToPage('bbb');\">Upstream                   </a><br/>";
            str += "<a              href=\"javascript:GoToPage('ccc');\">Load Balancing             </a><br/>"; 
            str += "</div>";
            document.getElementById(div_obj).innerHTML = str;
            return;
        }
        else {
            y += 6;
            document.getElementById(div_obj).style.height = y + "px";
            window.setTimeout(objy, 1);
        }
    }
    $(function() {
        $('#Conf').mouseleave(function() {
        $(this).css({display: 'none'});                             
    });           
    });
    </script>
    </head>
     
    <body>
    <div class="Defautl-Navigation" style="width: 70px; cursor: pointer;">
        <a onmouseover="over('Conf');" onmouseout="out(Conf);" href="#">配置</a>
    </div>
    <div id="Conf" style="overflow: hidden; border: #51789b 2px solid; display: none;
        filter: alpha(Opacity=90); left: 530px; float: left; width: 1px; position: absolute;
        top: 14px; left: 390px; height: 1px; background-color: #444; -moz-opacity: 0.9;
        text-align: left;">
        No Content
    </div>
    </body>
    </html>这个