如何实现鼠标经过DIV变色
发布网友
发布时间：2022-04-22 10:31
共2个回答
热心网友
时间：2022-05-12 15:51
用一个时间的案例来说明吧
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";
}
热心网友
时间：2022-05-12 17:09
.a{
width:100px
height:100px;
border:#2a2a2a solid 1px;
}
.a:hover{
border:#FF0000 solid 1px;
}
</style>
<div class="a">
</div>
