JavaScript 入门练习2：鼠标移入移出改变 div 大小

javascript文章/教程1个月前发布勤奋小助

0 0

–>

有一个位于屏幕正*的红色 div 正方形盒子，宽高为200×200像素，鼠标移入（悬停），正方形会变成400×400像素，鼠标移出，正方形恢复200×200像素。

使用 CSS3、JavaScript 两种方式实现。

效果如下图：

JavaScript 入门练习2：鼠标移入移出改变 div 大小

用到的知识点：

　　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>