<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标经过 离开事件</title>
<style>
#container{
width: 500px;
height: 500px;
background-color: #1dfdab;
}
#content{
width: 200px;
height: 200px;
background-color: #2d76fd;
}
</style>
</head>
<body>
<div id="container">
<div id="content"></div>
</div>
<script>
//初始化 通过id获取
let container=document.getElementById('container');
let content=document.getElementById('content');
//mousemove 鼠标经过container 触发事件 鼠标在这个元素里面移动就触发
//mouseenter 鼠标进入container 触发事件 触发一次
container.onmousemove = function() {
console.log('鼠标经过container');
}
// container.onmouseenter = function() {
// console.log('鼠标进入container');
// }
//mouseleave 鼠标离开元素触发一次事件，不会传递子元素
//mouseout 鼠标离开元素触发一次事件，事件传递子元素 子元素也会触发事件
container.onmouseout = function() {
console.log("鼠标离开元素，包括子元素");
}
// container.onmouseleave = function() {
// console.log("鼠标离开元素");
// }
</script>
</body>
</html>
06-01
2478
2478
07-25
649
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
