Explore js special effects and charm 01
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> js special effect </title>
<Script>
Function go (){
Document. getElementById ('div1 '). style. display = 'block ';
}
Function out (){
Document. getElementById ('div1 '). style. display = 'none ';
}
Function toGreen (){
Document. getElementById ("div2"). style. width = "300px ";
Document. getElementById ("div2"). style. height = "300px ";
Document. getElementById ("div2"). style. background = "green ";
}
Function toRed (){
Document. getElementById ("div2"). style. width = "100px ";
Document. getElementById ("div2"). style. height = "100px ";
Document. getElementById ("div2"). style. background = "red ";
}
</Script>
<Style>
# Div1 {
Width: 300px;
Height: 100px;
Border: 1px solid black;
Background-color: # F00;
Display: none;
}
# Div2 {
Width: 100px;
Height: 100px;
Background: red;
}
</Style>
</Head>
<Body>
<Input type = "checkbox" onmouseover = "go ()" onmouseout = "out ()"/> check box
<Div id = "div1"> the hover check box is the prompt content! Div1 </div>
<Br/>
<Div id = "div2" onmouseover = "toGreen ()" onmouseout = "toRed ()"> div2 </div>
</Body>
</Html>