Home > Developer > JavaScript
There is a red Div square box in the center of the screen, the width is 200x200 pixels, the mouse moves in (hover), the square becomes 400x400 pixels, the mouse moves out, and the square recovers 200x200 pixels.
Implemented in two ways using CSS3 and JavaScript.
Effects such as:
Knowledge points to use:
1, let the box center will use the margin, padding.
2,: hover pseudo-class selector. A label followed by a colon, followed by something like this is called a pseudo-class.
: Hover belongs to the anchor Pseudo class, the anchor pseudo-class is divided into: (Take a tag as an example)
a:link{color: #FF0000} links not visited
a:visited{color: #00FF00} visited link
a:hover{color: #FF00FF} Move the mouse over the link
a:active{color: #0000FF} The selected link
The above four lines of code can control the effect of clicking the a tag before and after the click.
For IE6 browsers, it supports setting pseudo-classes on the A-tag, but other tags set pseudo-classes, such as the Div:hover in the code below, IE6 cannot be displayed. If you need to let IE6 show the effect of div:hover, it is necessary to use JavaScript.
2, some HTML tags have the default margin, padding values, you need to manually clear these values in the style sheet, otherwise it may affect our arrangement effect
3. Label = Element
4, positioning is divided into relative positioning and absolute positioning, relative positioning is relative, absolute positioning is absolute. We use absolute positioning here. The knowledge about positioning will be explained in detail when it is used.
The code is as follows:
1, using CSS3 to achieve
1<!doctype html>234<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>Ten*{margin:0; padding:0; } Onediv{width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin:-100px 0 0-100px;} A -div:hover{width:400px; height:400px; margin:-200px 0 0-200px;} -</style> the<script> - -</script> - + -<body> +<div></div> A</body> at2, using JavaScript implementation
1<!doctype html>234<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>Ten*{margin:0; padding:0; } Onediv{width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px;} A -</style> -<script> theWindow.onload=function (){ - varObox=document.getelementbyid (' box '); - -Obox.onmouseover=function (){ +Obox.style.width= ' 400px '; -obox.style.height= ' 400px '; +obox.style.marginleft= ' -200px '; Aobox.style.margintop= ' -200px '; at }; -obox.onmouseout=function (){ -Obox.style.width= ' 200px '; -obox.style.height= ' 200px '; -obox.style.marginleft= ' -100px '; -obox.style.margintop= ' -100px '; in }; - }; to</script> + - the<body> *<div id= "box" ></div> $</body>Panax NotoginsengHere MarginLeft, margintop can be written on the same line, mouse cursor can use obox.style.margin= ' -200px 0 0-200px ' , mouse out can be used Obox.style.margin= ' -100px 0 0-100px '; 。
The values in single quotation marks are the values corresponding to the top, right, bottom, and left four orientations.
JavaScript Getting Started Exercise 2: Mouse move out change div size
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
