<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.移入移出</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 400px;
height: 400px;
background-color: lightblue;
margin: 30px auto;
border: 1px transparent solid;
}
.sub-box{
width: 100px;
height: 100px;
background-color: springgreen;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box" onmouseover="testMouseOver(this)" onmouseout="testMouseOut(this)"></div>
<hr>
<div class="box2" onmouseover="testOver()" onmouseout="testOut()">
<div class="sub-box"></div>
</div>
<hr>
<div class="box2" onmouseenter="testEnter()" onmouseleave="testLeave()">
<div class="sub-box"></div>
</div>
</body>
<script>
function testOver(){
alert("~~~~~~~over~~~~~~~~~");
}
function testOut(){
alert("~~~~~~~out~~~~~~~~~");
}
function testEnter(){
alert("####### enter #######");
}
function testLeave(){
alert("####### leave #######");
}
function testMouseOver(that) {
that.style.backgroundColor = "blue";
}
function testMouseOut(that) {
// that.style.backgroundColor = "red";
that.style.backgroundColor = "";
}
</script>
</html>
js:移入移出事件示例
最新推荐文章于 2024-05-30 15:25:18 发布