需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#div {
height: 200px width: 200px border: 1px solid red
}
#div.blue {
border-color: blue
}
</style>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#div").click(function() {
$(this).toggleClass("blue")
})
})
</script>
<div id="div"></div>
</script>
</body>
</html>
用一个时间的案例来说明吧
1 代码部分 代码我已经测试过了没有问题，复制下来直接在浏览器看效果就可以了
<!doctype html>
<html>
<head>
<title>s鼠标经过div成黄色</title>
<style>
#test{
width:200px
height:200px
border:2px solid red
}
</style>
<script>
window.onload = function(){
var test = document.querySelector("#test")
//鼠标经过的时候div编程了黄色
test.onmouseover = function(){
test.style.background="yellow"
}
//鼠标离开的时候div恢复了以前的颜色
test.onmouseleave = function(){
test.style.background=""
}
}
</script>
</head>
<body>
<div id="test">
</div>
</body>
</html>
2 以上代码在浏览器显示的效果 ，
鼠标没有经过的时候 显示 ：
鼠标经过的时候显示 ：
3 鼠标经过显示黄色的代码 ，就是给div绑定onmouseover事件，代码如下 ：
//鼠标经过的时候div编程了黄色
test.onmouseover = function(){
test.style.background="yellow"
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）