JavaScript 入門練習2：鼠標移入移出改變 div 大小
有一個位於屏幕正中央的紅色 div 正方形盒子，寬高為200×200像素，鼠標移入（懸停），正方形會變成400×400像素，鼠標移出，正方形恢復200×200像素。
使用 CSS3、JavaScript 兩種方式實現。
效果如下圖：
用到的知識點：
1、讓盒子居中會用到 margin、padding。
2、 ：hover 偽類選擇器。一個標簽後面有一個冒號，又跟著一個東西這樣的寫法就叫做偽類。
：hover 屬於錨偽類，錨偽類分為：（以 a 標簽為例）
a:link {color: #FF0000} 未訪問的鏈接
a:visited {color: #00FF00} 已訪問的鏈接
a:hover {color: #FF00FF} 鼠標移動到鏈接上
a:active {color: #0000FF} 選定的鏈接
通過以上四句代碼可以控制在點擊 a 標簽點擊前後實現的效果。
對於 IE6 瀏覽器來說，它支持對 a 標簽設置偽類，但是其他標簽如果設置偽類，比如我們下面的代碼裏面的 div：hover ，IE6 就無法顯示。如果需要讓 IE6 顯示 div：hover 的效果，是需要使用 JavaScript 來實現的。
2、有些 HTML 標簽有默認的 margin、padding 值，需要在樣式表中手動把這些值清零，否則可能會影響我們的排布效果
3、標簽=元素
4、定位分為相對定位和絕對定位，相對定位是 relative，絕對定位是 absolute。我們這裏使用絕對定位。關於定位的知識以後在用到的時候會再詳細說明。
代碼如下：
1、使用 CSS3 實現
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6<meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 *{ margin:0; padding:0; } 11 div{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px; } 12 13 div:hover{ width:400px; height:400px; margin:-200px 0 0 -200px; } 14 </style> 15 <script> 16 17 </script> 18 </head> 19 20 <body> 21 <div></div> 22 </body> 23 </html>
2、使用 JavaScript 實現
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 *{ margin:0; padding:0; } 11 div{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 12 13 </style> 14 <script> 15 window.onload=function (){ 16 var oBox=document.getElementById(‘box‘); 17 18 oBox.onmouseover=function (){ 19 oBox.style.width=‘400px‘; 20 oBox.style.height=‘400px‘; 21 oBox.style.marginLeft=‘-200px‘; 22 oBox.style.marginTop=‘-200px‘; 23 }; 24 oBox.onmouseout=function (){ 25 oBox.style.width=‘200px‘; 26 oBox.style.height=‘200px‘; 27 oBox.style.marginLeft=‘-100px‘; 28 oBox.style.marginTop=‘-100px‘; 29 }; 30 }; 31 </script> 32 </head> 33 34 <body> 35 <div id="box"></div> 36 </body> 37 </html>
這裏的 marginLeft、marginTop 可以寫在同一行，鼠標移入可以使用 oBox.style.margin=‘-200px 0 0 -200px‘; ，鼠標移出可以使用 oBox.style.margin=‘-100px 0 0 -100px‘; 。
單引號裏面的值分別表示上、右、下、左四個方位對應的值。
JavaScript 入門練習2：鼠標移入移出改變 div 大小