JavaScript Getting Started Exercise 2: Mouse move out change div size

Source: Internet
Author: User

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> at

2, 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 Notoginseng

Here 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.