HTML之鼠标移动事件

最新推荐文章于 2025-05-22 20:30:34 发布

一岁-枯荣

最新推荐文章于 2025-05-22 20:30:34 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：鼠标 html 移入移出移动

本文链接：https://blog.youkuaiyun.com/qq_40401942/article/details/78116932

HTML 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨了HTML中的鼠标事件，包括鼠标移入、移出和移动等交互操作，揭示了如何利用这些事件创建丰富的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标事件：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
	div{
	width: 200px;
	height: 200px;
	border: 1px solid #000000;
	float: left;
	margin: 10px 10px;
	}
	div p{
	background-color: gray;
	color: white;
	height: 40px;
	line-height: 40px;
	text-align: center;
	}
	</style>
	<script>
	//声明
	var a=0;
	var b=0;
	var c=0;
	var d=0;
	var e=0;

	function myMove(){
	a++;
	var font = document.getElementById("a");//获取font标签对象
	font.innerHTML=a;
	}
	function myOver(){
	b++;
	var font = document.getElementById("b");//获取font标签对象
	font.innerHTML=b;
	}
	function myOut(){
	c++;
	var font = document.getElementById("c");//获取font标签对象
	font.innerHTML=c;
	}
	function myEnter(){
	d++;
	var font = document.getElementById("d");//获取font标签对象
	font.innerHTML=d;
	}
	function myLeave(){
	e++;
	var font = document.getElementById("e");//获取font标签对象
	font.innerHTML=e;
	}
	</script>
	</head>
	<body>
	<!--<script>
	document.write("<h1>这是一个标题！</h1>");
	document.write('"<h1>这也是一个标题！</h1>"');
	document.write("<br />");
	document.write("''");
	</script>-->
	<!--<button type="button" onclick="alert('欢迎')">点我</button>-->
	<!--<h1>我的JAVA教程</h1>
	<p id="demo">
	王源
	</p>
	<script>
	function myFunction(){
	x=document.getElementById("demo");
	x.innerHTML="TFBOYS";
	}
	</script>
	<button type="button" onclick="myFunction()">点我</button>-->
	<!--<script>
	function changeImage(){
	element=document.getElementById('myimage')
	if(element.src.match("bulbon"))
	{
	element.src="img/2841967bcdcac1bf9e2351b2c8f842f1_pic_bulboff.gif";
	}
	else{
	element.src="img/814acbafe5263706f0af6e1ce1b77ae4_pic_bulbon.gif";
	}
	}
	</script>
	<img id="myimage" onclick="changeImage()"
	src="img/2841967bcdcac1bf9e2351b2c8f842f1_pic_bulboff.gif" width="50px" />-->
	<div onmousemove="myMove()">
	<font id="a">0</font>
	<p>鼠标移动事件onmousemove</p>
	</div>
	<div onmouseover="myOver()">
	<font id="b">0</font>
	<p>鼠标移入事件onmouseover</p>
	</div>
	<div onmouseout="myOut()">
	<font id="c">0</font>
	<p>鼠标移出事件onmouseout</p>
	</div>
	<div onmouseenter="myEnter()">
	<font id="d">0</font>
	<p>鼠标移入事件onmouseenter</p>
	</div>
	<div onmouseleave="myLeave()">
	<font id="e">0</font>
	<p>鼠标移出事件onmouseleave</p>
	</div>
	</body>
	</html>