js 解决 onmouseover onmouseout的问题,使用setTimeout解决

原文引用地址：http://www.cnblogs.com/nyth/archive/2010/11/26/1888900.html

 

HTML:

<ul id="sddm">

        <!--如果栏目下没有子菜单就不用onmouseover="mopen('m1')" onmouseout="mclosetime()"以及下面的那个DIV -->

        <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>

            <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

                <a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript

                    DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a>

            </div>

        </li>

        <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a>

            <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

                <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a>

                <a href="#">DIV dropdown</a>

            </div>

        </li>

        <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a>

            <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

                <a href="#">Visa Credit Card</a> <a href="#">Paypal</a>

            </div>

        </li>

        <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a>

            <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

                <a href="#">Download Help File</a> <a href="#">Read online</a>

            </div>

        </li>

        <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a>

            <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">

                <a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="#">Call Center</a>

            </div>

        </li>

    </ul>

    <div style="clear: both">

    </div>

    <div style="clear: both">

        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    </div>

 

 

JS:

 

<script type="text/javascript">

<!--

var timeout         = 500;

var closetimer      = 0;

var ddmenuitem      = 0;

 

// open hidden layer

function mopen(id)

{  

    // cancel close timer

    mcancelclosetime();

 

    // close old layer

    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

 

    // get new layer and show it

    ddmenuitem = document.getElementById(id);

    ddmenuitem.style.visibility = 'visible';

 

}

// close showed layer

function mclose()

{

    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

}

 

// go close timer

function mclosetime()

{

    closetimer = window.setTimeout(mclose, timeout);

}

 

// cancel close timer

function mcancelclosetime()

{

    if(closetimer)

    {

        window.clearTimeout(closetimer);

        closetimer = null;

    }

}

 

// close layer when click-out

document.onclick = mclose;

// -->

    </script>

 

 

CSS:

 

#sddm

{   margin: 0;

    padding: 0;

    z-index: 30}

 

#sddm li

{   margin: 0;

    padding: 0;

    list-style: none;

    float: left;

    font: bold 11px arial}

 

#sddm li a

{   display: block;

    margin: 0 1px 0 0;

    padding: 4px 10px;

    width: 60px;

    background: #5970B2;

    color: #FFF;

    text-align: center;

    text-decoration: none}

 

#sddm li a:hover

{   background: #49A3FF}

 

#sddm div

{   position: absolute;

    visibility: hidden;

    margin: 0;

    padding: 0;

    background: #EAEBD8;

    border: 1px solid #5970B2}

 

    #sddm div a

    {   position: relative;

        display: block;

        margin: 0;

        padding: 5px 10px;

        width: auto;

        white-space: nowrap;

        text-align: left;

        text-decoration: none;

        background: #EAEBD8;

        color: #2875DE;

        font: 11px arial}

 

    #sddm div a:hover

    {   background: #49A3FF;

        color: #FFF}