jQuery——21. 鼠标移动事件【 mouseover（），mouseout（），mouseenter（），mouseleave（），mousemo（）ve】

本文链接：https://blog.csdn.net/weixin_63215361/article/details/146247313

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#box{
				width: 200px;height: 200px;border: 2px solid black;
				margin: 50px auto;
			}
			#box P{
				width: 100px;height: 100px;background: blue;
				margin: 50px auto;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				//1.鼠标移入元素上方事件
				$("#box").mouseover(function(){
					console.log("鼠标移入元素上方");					
				});
				
				//2.鼠标移出元素上方事件
				$("#box").mouseout(function(){
					console.log("鼠标移出元素上方");
				});
				
				
				//3.鼠标移入元素范围内事件
				$("#box").mouseenter(function(){
					console.log("鼠标移入元素范围");					
				});
				
				//4.鼠标移出元素范围内事件
				$("#box").mouseleave(function(){
					console.log("鼠标移出元素范围");					
				});

				//5.鼠标在元素范围内移动事件（不断触发）
				$("#box").mousemove(function(){
					console.log("不断触发");					
				});

			})
		</script>
	</head>
	<body>
		<div id="box">
			<p></p>
		</div>
	</body>
</html>