如何实现鼠标经过DIV变色
用一个时间的案例来说明吧
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";
}
2016-12-06
.a{
width:100px
height:100px;
border:#2a2a2a solid 1px;
}
.a:hover{
border:#FF0000 solid 1px;
}
</style>
<div class="a">
</div>