先贴javascript经典例子代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 200px;height: 200px; background: red; margin-bottom: 10px;} 8 #box2{display: none} 9 </style> 10 <script type="text/javascript"> 11 function jin(){ 12 document.getElementById("box1").style.backgroundColor = "blue"; 13 document.getElementById("box2").style.display = "block"; 14 } 15 16 function chu(){ 17 document.getElementById("box1").style.backgroundColor = "red"; 18 document.getElementById("box2").style.display = "none"; 19 } 20 </script> 21 </head> 22 <body> 23 <div id="box1" onmouseover="jin()" onmouseout="chu()"></div> 24 <div id="box2"></div> 25 </body> 26 </html>
鼠标移动前效果：
鼠标移动后效果：
代码注释解析：
css中
. 是类，可应用于任何标签，如:class="style1"
#是伪类，只可用于某一个标签，如:id="header"
一般都是用display:none和display:block来控制层的显示，上面代码用
display:none和display:block使box2是否设置为块级元素。
display:block;
是让对象成为块级元素(比如a，span等)
可参考：CSS display 属性