鼠标悬停，点击效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
button{
border: 0;
}
img{
margin: 50%;
}
</style>
<script>
function changeColor( str){
document.getElementById("color").style.backgroundColor=str;
}
function myOver(){
document.getElementById("tp").src="img/haha.gif";
}
function myOut(){
document.getElementById("tp").src="img/cry.jpg";
}
</script>
</head>
<body id="color">
<button onclick="changeColor('pink')">粉色</button>
<button onclick="changeColor('orange')">橙色</button>
<button onclick="changeColor('grey')">灰色</button>
<button onclick="changeColor('lightgreen')">豆绿色</button>
<div onmouseover="myOver()" onmouseout="myOut()" style="float: left;">
<img id="tp" src="img/cry.jpg" />
</div>
</body>
</html>
