<html lang="en">
<head>
<meta charset="UTF-8">
<title>div变颜色</title>
<style>
#image{
width:200px
height:200px
background-color:#ccc
}
p{
text-indent:2em
padding:10px
}
</style>
</head>
<body>
<div id="image" onclick="ToRed()" onmouseover="ToGreen()" onmouseout="ToBlue()">
<p>鼠标点击变红，鼠标移动到盒子内变绿，移出变蓝。</p>
<p>如果想让图片变色，可以把图片做成具有一定透明度的图片，改变背景颜色。</p>
</div>
<script type="text/javascript">
function ToRed(){
document.getElementById('image').style.backgroundColor="#f00"
}
function ToGreen(){
document.getElementById('image').style.backgroundColor="#0f0"
}
function ToBlue(){
document.getElementById('image').style.backgroundColor="#00f"
}
</script>
</body>
</html>
1、首先创建一个新的html文件，如图所示。
2、在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg ，如图所示。
3、接着在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。
4、然后设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。
5、最后实用浏览器打开，保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。
