效果：移入div1，div2保持顯示，移出div1，div2消失。

　　　移入div2，div2保持顯示，移出div2，div2消失。

一、HTML代碼

<div id=‘div1‘></div>
<div id=‘div2‘></div>

就g只有兩個div模塊，移入一個，顯示另外一個。

二、CSS代碼

給兩個div抹上顏色，便於區別，在css裏，我設置了float 屬性，定義元素在左邊方向浮動

 1 #div1{
 2     height:50px;
 3     background:grey;
 4     width:50px;
 5     float
 
:left;border:1px
 6     }
 7 #div2{
 8     float:left;border:1px;    
 9     height:50px;
10     background:blue;
11     width:50px;
12     display:none;
13     
14     }

三JavaScript代碼

 1 <script>
 2 window.onload=function(){
 3     var oDiv1 = document.getElementById(‘div1‘);   
 4     var oDiv2 = document.getElementById(‘div2‘);    
 
 5     var timer =null;
 6     oDiv1.onmouseover=oDiv2.onmouseover =  function(){
 7         clearTimeout(timer);        //通過setTimeout返回值得值，清除setTimeout
 8         oDiv2.style.display=‘block‘;
 9         
10         
11         };
12     oDiv1.onmouseout = oDiv2.onmouseout =  function(){
13          timer =  setTimeout(function
 
(){   //此處賦值給timer，因為setTimeout本身會返回一個值。這個值是系統記錄的一個setTimeout的ID，以後可以通過這個ID取消定時器
14             
15             oDiv2.style.display=‘none‘;    //設置1000毫秒後，div2模塊消失
16             },1000);
17         
18         }
19     
20     
21     
22     };
23 
24 
25 
26 </script>

四、效果演示

setTimeout應用例子-移入移出div顯示和隱藏