先贴javascript经典例子代码：
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{width: 200px;height: 200px; background: red; margin-bottom: 10px;}
#box2{display: none}
</style>
<script type="text/javascript">
function jin(){
document.getElementById("box1").style.backgroundColor = "blue";
document.getElementById("box2").style.display = "block";
} function chu(){
document.getElementById("box1").style.backgroundColor = "red";
document.getElementById("box2").style.display = "none";
}
</script>
</head>
<body>
<div id="box1" onmouseover="jin()" onmouseout="chu()"></div>
<div id="box2"></div>
</body>
</html>
鼠标移动前效果：
鼠标移动后效果：
代码注释解析：
css中
. 是类，可应用于任何标签，如:class="style1"
#是伪类，只可用于某一个标签，如:id="header"
一般都是用display:none和display:block来控制层的显示，上面代码用
display:none和display:block使box2是否设置为块级元素。
display:block;
是让对象成为块级元素(比如a，span等) 可参考：CSS display 属性