大概就是这样的效果: 
<html> 
<body> 
    <a href="javascript:voie(0)" id="atest" onmouseover="a_onmouseover()">鼠标悬停 </a> 
    <div id="divTest" style="display: none; background: red; width: 100px"> 
    测试内容 
    </div>     <script type="text/javascript"> 
            var timer; 
        function a_onmouseover() 
        { 
            var ddv = document.getElementById("divTest"); 
            var atest = document.getElementById("atest"); 
            ddv.style.display="block"; 
            ddv.onmouseover=function(){ 
                clearTimeout(timer); 
                ddv.onmouseout=function(){ 
                    this.style.display="none"; 
                } 
            } 
            atest.onmouseout=function(){Mout()} 
        } 
        
        function Mout() 
        { 
            timer = setTimeout(function(){document.getElementById("divTest").style.display="none";},100); 
        }     </script> </body> </html>   然后我用了jQuery想制作出层滑动的效果: <script language="javascript" type="text/javascript"> 
//显示隐藏login鼠标悬停 
    var timer; 
    $(document).ready(function() { 
            var ac = $('#aLogin'); 
            var lc = $('#divLogin'); 
            ac.mouseover(function() {    
                lc.show('slow'); 
                lc.mouseover(function(){ 
                    clearTimeout(timer); 
                    lc.mouseout(function(){ 
                      lc.hide('slow'); 
                    }) 
                }); 
                ac.mouseout(function(){timer=setTimeout(function(){lc.hide('slow');},500);}); 
            }); 
        }); 
        
</script> 
<body bgcolor="#FFFFFF" style=" margin-left:0px; margin-top:0px; text-align:center;"> 
<form id="form1" runat="server"> 
<table id="__01" cellpadding="0" cellspacing="0" style=" width:950; height:807px; border:0px;"> 
<tr> 
<td> 
<table style="width:950px; height:54px;"> <tr> <td style="width:81%;"> 
            <div style="height:34px; width: 434px; display:none;" id="divLogin" > 
                <uc1:Login ID="Login1" runat="server" />//用户登录控件,详细代码在下面。 
            </div> </td> <td style="width:4%"> <a style="text-decoration:none; font-family:Helvetica; font-size:14px; color:Black;" id="aLogin" href="#">登&nbsp;录 </a> </td> </tr> </table> 
</td> 
</tr> 
<table> 用户控件代码: <table style="width:426px; font-family:Helvetica; font-size:13px; height: 28px;" > 
    <tr style="height:31px;"> 
        <td> 
            <asp:Label ID="lblUserName" runat="server" Text="User:" Height="17px"> </asp:Label> 
            <asp:TextBox ID="txtUserName" runat="server" Width="108px" Height="15px"> </asp:TextBox> 
        </td> 
        <td> 
            <asp:Label ID="lblPassword" runat="server" Text="Password:" Height="17px"> </asp:Label> 
            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" 
                Width="110px" Height="15px"> </asp:TextBox> 
        </td> 
        <td> 
            <asp:LinkButton ID="lbnLogin" runat="server" ForeColor="#CC3300" 
                onclick="lbnLogin_Click">登 录 </asp:LinkButton> 
        </td> 
        <td> 
            <asp:LinkButton ID="lbnLoginOut" runat="server" ForeColor="#CC3300" 
                onclick="lbnLoginOut_Click" Visible="False">退出登录 </asp:LinkButton> 
        </td> 
    </tr> 
</table> 
  然后请朋友们帮忙看下,当我onmouseover和onmouseout时都是没问题的,但是我的鼠标覆盖在用户控件上面时(也就是我想要滑出来的层),它依然不能block,继续隐藏。请朋友们帮我看看,谢谢!

解决方案 »

  1.   

    一个已经隐藏的东西,是不会引发 onmouseover 事件的。想想看为什么。
      

  2.   

    找到原因了,主要是clearTimeout失效,哪个兄弟帮我看看怎么解决啊,分不够可以再追加!!
     var timer;
         $(document).ready(function() {
                 var ac = $('#aLogin');
                 var lc = $('#divLogin');
                 ac.mouseover(function() {    
                     lc.show('slow');
                     lc.mouseover(function(){
                        clearTimeout(timer);
                        lc.mouseout(function(){
                           lc.hide('slow');
                        });
                     });
                     ac.mouseout(function() {
                         timer=setTimeout(mout(),100);
                     });
                 });
                 function mout(){
                    lc.hide('slow');
                 }
            });
      

  3.   

    if(timer)
      clearTimeout(timer);