javascript 鼠标移过链接时显示与隐藏层的问题。

想做一个效果，当鼠标移到一个产品的链接时显示该产品详细清单的层，现在遇到的问题是鼠标移过链接后该层就会立刻消失，我想要的效果是鼠标移过链接后该层不会马上消失，并且做出如下判断，假如鼠标移到了该层上，那么就终止该层的消失，如果鼠标不在该层上，那么消失。
目前代码如下，请大家帮忙：
<!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>
    <title>javascript Test</title>
    <script type="text/javascript">
        function showMessage(){
           document.getElementById("message").style.display="block";
        }
        function hiddenMessage(){
           document.getElementById("message").style.display="none";
        }
    </script>
</head>
<body>
   <span onmouseover="showMessage()" onmouseout="hiddenMessage()">显示产品详情</span>
   
   <div id="message" style="display:none; width:200px; border:1px solid gray;">
           <ul>
            <li>这里是详细情况...</li>
            <li>这里是详细情况...</li>
            <li>这里是详细情况...</li>
            <li>这里是详细情况...</li>
           </ul>
   </div>
</body>
</html>

解决方案 »

  1.   

    我考虑到用setTimeout来给hiddenMessage()做个延时，但是不知道如何判断当鼠标移到message层上时终止隐藏层的事件，请大家帮忙，有没有更好的办法。
      

  2.   

    查了一些资料，自己解决掉了。把我的代码贴出来，大家有更好的方法的话也贴出来看一下。<!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>
        <title>javascript Test</title>
        <script type="text/javascript">
            var s;
            function showMessage(){
               window.clearTimeout(s);
               document.getElementById("message").style.display="block";
            }
            
            function hiddenMessage(){
               s=window.setTimeout("hidden();",500);
            }
                        function hidden(){
               document.getElementById("message").style.display="none";
            }
        </script>
    </head>
    <body>
       <span onmouseover="showMessage()" onmouseout="hiddenMessage()">显示产品详情</span>
       
       <div id="message" style="display:none; width:200px; border:1px solid gray;" onmouseover="showMessage()" onmouseout="hiddenMessage()">
               <ul>
                <li>这里是详细情况...</li>
                <li>这里是详细情况...</li>
                <li>这里是详细情况...</li>
                <li>这里是详细情况...</li>
               </ul>
       </div>
    </body>
    </html>