<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入和移出事件</title>
<style>
/* 这是css鼠标经过变色，如果不写script它会让文字消隐。 */
div{
font-size:100px;
color:black;
text-align:center;
line-height:60px;
transition:all 1s;
}
div:hover{
color:rgba(0,0,0,0);
text-shadow:#a9f596 0px 0px 100px;
}
</style>
<script>
//这是鼠标进入和出去事件
window.onload = function(){
var op = document.getElementById("content");
op.onmouseover = function(){
this.style.color = "#f58220";
};
op.onmouseout = function(){
this.style.color = "black";
};
};
</script>
</head>
<body>
<br/>
<div id="content">春来草自青</div>
</body>
</html>
如图所示，css动画控制让背景变淡绿，鼠标移入让文字变成橙色。
