zoukankan      html  css  js  c++  java
  • 鼠标滑过div显示与隐藏

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server"> 
    </head>
    <body>
        <form id="form1" runat="server">
        问题:当绿色的DIV显示出来后,鼠标移入DIV无事,再移到aaaa正上方的一小部分局域(就aaaa四个字母上方),DIV就关了,不知为何
        <div style="margin:0px auto 0px auto; position:absolute;left:250px;top:250px;padding:20px; z-index:1;">  
            <asp:LinkButton ID="LinkButton1" onmouseover="over(this,document.all.se)" onmouseout="timer=setTimeout('out(document.all.se)',500)" OnClientClick="alert('left'+this.offsetLeft+';top'+this.offsetTop+';高'+this.offsetHeight+';宽'+this.offsetWidth);return false;" runat="server">M我</asp:LinkButton>
           
        </div>
       

       
      
        <div id="se" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" background-color:#32ba5c; display:none; 200px; position:absolute; padding:20px;">      
            <div >aaaa</div>
            <div >bbbb<input type="button" onclick="this.parentElement.parentElement.style.display='none'" value="关闭" /></div>
            <div>aaaa</div>
            <div>bbbb</div>
            <div>aaaa</div>
            <div>bbbb</div>      
        </div>
       
     
       
      
        </form>
    </body>
    </html>
    <script>
        function over(obj,div)
        {
             var rec=getoffset(obj);
             div.style.top=rec[0]+obj.offsetHeight;
             div.style.left=rec[1];    
             div.style.display="block";       
        }
       
        function out(div)
        {
            div.style.display="none";
        }

    function getoffset(e)

     var t=e.offsetTop; 
     var l=e.offsetLeft; 
     while(e=e.offsetParent)
     { 
      t+=e.offsetTop; 
      l+=e.offsetLeft; 
     } 
     var rec = new Array(1);
     rec[0]  = t;
     rec[1] = l;
     return rec

    </script>

  • 相关阅读:
    Python核心编程——正则表达式
    Python 随笔之Redis
    我的第一个Python随笔
    python练习题-day20
    python练习题-day19
    python练习题-day18
    python练习题-day16
    python练习题-day15
    python练习题-day14
    python练习题-day13
  • 原文地址:https://www.cnblogs.com/Godblessyou/p/1779118.html
Copyright © 2011-2022 走看看