<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mouse</title>
<style>
#box{
margin: 0 auto;
width: 200px;
height: 200px;
background-color: #000;
color: #fff;
cursor: pointer;
padding:10px;
}
#box.enter{
box-sizing: border-box;
border: 10px solid red;
background-color: #fff;
padding:10px;
color: red;
}
</style>
</head>
<body>
<div id="box">鼠标移入改变样式,鼠标移出恢复</div>
<script>
window.onload=function(){
var oDiv=document.getElementById('box')
oDiv.onmouseover=function(){
oDiv.className="enter"
}
oDiv.onmouseout=function(){
oDiv.className=""
}
}
</script>
</body>
</html>
1.5鼠标移入移出事件
最新推荐文章于 2022-09-23 10:47:15 发布