zoukankan      html  css  js  c++  java
  • Js onmouseover和onmouseout小特效

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
        div{float:left;margin:20px;}
        #div1{width:100px;height:100px;background: #f00;}
        #div2{width:200px;height:200px;background:#ccc;display: none;}
    </style> 
    <script type="text/javascript">
        window.onload=function(){
            var oDiv1=document.getElementById("div1");
            var oDiv2=document.getElementById("div2");
            var timer=null;
            oDiv1.onmouseover= oDiv2.onmouseover=function(){
                clearTimeout(timer);
                oDiv2.style.display="block";
            }
             oDiv1.onmouseout= oDiv2.onmouseout=function(){
               timer=setTimeout(function(){
                    oDiv2.style.display="none";
                },500)
            }
            
        }
    </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
    </html>
  • 相关阅读:
    四级英语day9
    123
    像程序员一样思考
    Kali
    OS X
    Effective Java
    DHU ACM OJ
    Ambari
    Hadoop
    Hadoop2
  • 原文地址:https://www.cnblogs.com/itsmart/p/8047784.html
Copyright © 2011-2022 走看看