JavaScript 入門練習2：鼠標移入移出改變 div 大小

時間 2019-11-29

標籤 javascript 入門練習鼠標移入移出改變 div 大小欄目 JavaScript 简体版

原文原文鏈接

有一個位於屏幕正中央的紅色 div 正方形盒子，寬高爲200×200像素，鼠標移入（懸停），正方形會變成400×400像素，鼠標移出，正方形恢復200×200像素。html

使用 CSS三、JavaScript 兩種方式實現。web

效果以下圖：瀏覽器

用到的知識點：app

　　一、讓盒子居中會用到 margin、padding。spa

　　二、：hover 僞類選擇器。一個標籤後面有一個冒號，又跟着一個東西這樣的寫法就叫作僞類。scala

　　　　：hover 屬於錨僞類，錨僞類分爲：（以 a 標籤爲例）code

　　　　a:link {color: #FF0000} 未訪問的連接htm

　　　　a:visited {color: #00FF00} 已訪問的連接blog

　　　　a:hover {color: #FF00FF} 鼠標移動到連接上seo

　　　　a:active {color: #0000FF} 選定的連接

　　經過以上四句代碼能夠控制在點擊 a 標籤點擊先後實現的效果。

　　　　對於 IE6 瀏覽器來講，它支持對 a 標籤設置僞類，可是其餘標籤若是設置僞類，好比咱們下面的代碼裏面的 div：hover ，IE6 就沒法顯示。若是須要讓 IE6 顯示 div：hover 的效果，是須要使用 JavaScript 來實現的。

　　二、有些 HTML 標籤有默認的 margin、padding 值，須要在樣式表中手動把這些值清零，不然可能會影響咱們的排布效果

　　三、標籤=元素

　　四、定位分爲相對定位和絕對定位，相對定位是 relative，絕對定位是 absolute。咱們這裏使用絕對定位。關於定位的知識之後在用到的時候會再詳細說明。

代碼以下：

一、使用 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>

二、使用 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>