前端---js中onmouseover和onmouseout事件

最新推荐文章于 2023-09-26 13:39:25 发布
最新推荐文章于 2023-09-26 13:39:25 发布
阅读量9.2k 收藏 24
点赞数 8
分类专栏： 前端 文章标签： onmouseover事件 onmouseout事件 多级窗口 多级页面布局 折叠窗口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42504145/article/details/82861268
版权

在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmouseout这两个事件来实现的操作.

 

1.onmouseover定义和用法

onmouseover 事件会在鼠标指针移动到指定的对象上时发生。

语法

οnmοuseοver="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, 
<tr>, <tt>, <ul>, <var>

 

2.onmouseout定义和用法

onmouseout 事件会在鼠标指针移出指定的对象时发生。

语法

οnmοuseοut="SomeJavaScriptCode"
参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, 
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, 
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, 
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, 
<tr>, <tt>, <ul>, <var>

 

  在接下来我们用一个实例来进行讲解这两个事件的作用:

代码如下:

<html>
   <head>
	<title>js操作</title>
      <style>
	.div_in{
		width:330px;
		height:165px;
	


	}
	.div_in2{
		width:321px;
		height:20px;
		padding:18px 0 17px 0;
		line-height:22px;
		font-size:14px;
		border: 1px solid rgb(234, 238, 237);
	} 

	.div_meau1{
		display:inline-block;
		padding-left:15px;
		font-size:18px;
		font-weight:500;
		padding:0 8px;


	}
	.div_meau2{
		margin:0 5px 5px 0;
		padding:0 8px;
		display:inline-block;

	}
	.div_tag1{
		width:200px;
		height:400px;
		margin-top:-50px;
		margin-left:322px;
		border: 1px solid rgb(234, 238, 237);
		display:none;
	}
	.div_tag2{
		width:200px;
		height:400px;
		margin-top:100px;
		margin-left:200px;
		border: 1px solid rgb(234, 238, 237);
		display:none;
	}
      </style>
	<script type="text/javascript">
		function myClickshow(one){
		 	var event=document.getElementById(one);
			event.style.display="block";
		}
		function myClickhide(one){
		 	var event=document.getElementById(one);
			event.style.display="none";
		}
	</script>
   </head>
<body>
	<div class="div_in">
		<div class="div_in2" onmouseout="myClickhide('one1')" onmouseover="myClickshow('one1')">
		   <div class="div_meau1">技术</div>
		   <div class="div_meau2">Java</div>
		   <div class="div_meau2">PHP</div>
		   <div class="div_meau2">C++</div>
		   <div class="div_meau2" style="margin-left:10px;">区块链</div>
		   <img src="logo.png" />

		   <div id="one1"  class="div_tag1" onmouseout="myClickhide('one2')" onmouseover="myClickshow('one2')">
	 	         <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
	 	         <div class="div_meau2">Java</div>
		   	 <div class="div_meau2">PHP</div>
		 	 <div class="div_meau2">C++</div>
		 	 <div class="div_meau2">C#</div>
		 	 <div class="div_meau2">数据挖掘</div>
			<div id="one2"  class="div_tag2">
			   <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
		  	   <div class="div_meau2">Java</div>
		  	   <div class="div_meau2">PHP</div>
		 	   <div class="div_meau2">C++</div>
		 	   <div class="div_meau2">C#</div>
		 	   <div class="div_meau2">数据挖掘</div>
			</div>
		   </div>
		</div>
		
		<div class="div_in2"  onmouseout="myClickhide('two1')" onmouseover="myClickshow('two1')">
		   <div class="div_meau1">产品</div>
		   <div class="div_meau2">产品总监</div>
		   <div class="div_meau2">产品经理</div>
		   <div class="div_meau2" style="margin:0px;">数据经理</div>
		   <img src="logo.png" />

		   <div id="two1"  class="div_tag1" onmouseout="myClickhide('two2')" onmouseover="myClickshow('two2')">
			   <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
		  	   <div class="div_meau2">Java</div>
		  	   <div class="div_meau2">PHP</div>
		 	   <div class="div_meau2">C++</div>
		 	   <div class="div_meau2">C#</div>
		 	   <div class="div_meau2">数据挖掘</div>
			<div id="two2"  class="div_tag2">
			   <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
		  	   <div class="div_meau2">Java</div>
		  	   <div class="div_meau2">PHP</div>
		 	   <div class="div_meau2">C++</div>
		 	   <div class="div_meau2">C#</div>
		 	   <div class="div_meau2">数据挖掘</div>
			</div>
		   </div>
		</div>

		<div class="div_in2"  onmouseout="myClickhide('thr1')" onmouseover="myClickshow('thr1')">
		   <div class="div_meau1">设计</div>
		   <div class="div_meau2">UI设计师</div>
		   <div class="div_meau2">交互设计</div>
		   <div class="div_meau2" style="margin:0px;">网页设计</div>
		   <img src="logo.png" />

		   <div id="thr1"  class="div_tag1" onmouseout="myClickhide('thr2')" onmouseover="myClickshow('thr2')">
			   <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
		  	   <div class="div_meau2">Java</div>
		  	   <div class="div_meau2">PHP</div>
		 	   <div class="div_meau2">C++</div>
		 	   <div class="div_meau2">C#</div>
		 	   <div class="div_meau2">数据挖掘</div>
			<div id="thr2"  class="div_tag2">
			   <div style="padding-left:15px;font-size:18px;font-weight:500;padding:5 8px;">后端开发</div>
		  	   <div class="div_meau2">Java</div>
		  	   <div class="div_meau2">PHP</div>
		 	   <div class="div_meau2">C++</div>
		 	   <div class="div_meau2">C#</div>
		 	   <div class="div_meau2">数据挖掘</div>
			</div>
		   </div>
		</div>


	</div>
</body>
</html>

再看一下实现的效果图:

 

 

lbxxzt
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS内置对象及其用法总结
lumen_db的博客
10-16 378
今天去面试了一家小公司~面试题都比较基础，但是比较悲催的是本人日常不爱总结导致基础记得都很模糊，so结束的时候就为自己点了一首凉凉。所以决定还是日常总结一下，毕竟温故而知新，可以为师也吗！ JS对象分为3种：自定义、内置、浏览器。今天就总结一下JS内置对象以及一些用法。 1.Math对象:不是一个构造函数，不需要new，直接调用即可。 a.Math.max(x,y);返回x,y的最大值。注意：如果小括号种的值有非数值，则返回NaN，如果什么都没有返回-Infinity。 Math.max('aa',);-&
js中的事件-鼠标悬浮和离开事件onmouseover和onmouseout
最新发布
小丁的博客
11-14 1720
js中的事件-鼠标悬浮和离开事件 onmouseover 和 onmouseout
JS-事件/鼠标单击事件( onclick ）/鼠标经过事件（onmouseover）/鼠标移开事件（onmouseout）/光标聚焦事件（onfocus）/失焦事件（onblur）/内容选中事......
Jennyni1122的博客
06-17 9255
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 主要事件表: image.png 鼠标单击事件( ...
js 鼠标事件各个参数示意
Thea12138的博客
09-26 735
鼠标指针在视口中的坐标（不包括任何滚动偏移）。：被按下的鼠标按钮。1 左键 2滚轮 3右键。：表示按下哪些鼠标按钮的位掩码。：是否按下了相应的键盘按键。：鼠标指针在屏幕中的坐标。
JavaScript鼠标移动事件及案例
weixin_67224308的博客
10-17 1万+
于onmouseover相同但mouseenter事件只执行一次。鼠标移动都某个指点的HTML标签上时触发的事件。鼠标从HTML标签上移开时触发的事件。alert("按钮被点击")//被点击两次后弹出弹出框。alert("按钮被点击")//被点击后弹出弹出框。//找到按钮并设置双击击事件。//找到按钮并设置点击事件。鼠标双击时事件处理函数。
JavaScript中的onmouseover事件和onmouseout事件实例
热门推荐
平凡的平淡的博客
09-28 6万+
目录 JavaScript事件 onmouseover事件 onmouseout事件： onmouseover和onmouseout事件结合案例： HTML部分 CSS部分 javascript部分 最终效果： JavaScript事件 事件可以是浏览器行为，也可以是用户行为！ 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点...
JavaScript (七) -- JavaScript 事件（需要了解的事件的运用）
PUYALEI的博客
05-06 907
当用户按下按钮时，将使用onmousedown事件将按钮的阴影效果移除，当用户释放按钮时，将使用onmouseup事件将阴影效果重新添加到按钮上。在validateInput函数中，我们获取了用户按下的键的代码。可以使用onmousedown事件开始跟踪鼠标移动，然后使用onmousemove事件更新元素的位置，最后使用onmouseup事件停止跟踪鼠标移动，从而实现制作拖动效果。在上面的示例中，我们使用onmouseup事件来触发buttonRelease()函数，该函数将按钮的样式更改为指定的样式。
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
Cosmoshhhyyy的博客
07-05 1509
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
onmouseover和onmouseout事件小结
brokenkay的博客
06-30 1万+
前言 onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明 我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...
onmouseover事件和onmouseout事件全面理解
09-01
在JavaScript中，`onmouseover`和`onmouseout`事件是两个非常常见的用于处理用户交互的事件。它们主要用于响应用户将鼠标指针移到元素上方或移出元素时的行为。这两个事件在网页动态效果和用户界面交互设计中扮演着...
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
10-30
在这个示例中，我们使用了JavaScript来捕捉onmouseover和onmouseout事件，并更改表格的背景颜色。在IE浏览器中，这个方法可以正常工作，而在Firefox浏览器中，我们可以使用CSS的:hover伪类来实现同样的效果。 这个...
JavaScript驾驭网页-CSS与DOM_.docx
10-09
在示例中，`onmouseover`和`onmouseout`事件被用来在鼠标进入和离开`<span>`元素时改变它的样式类。 CSS样式类与JavaScript类是两个独立的概念。样式类定义了元素的视觉表现，而JavaScript类通常用于逻辑控制或组件...
第34章 项目1-博客前端：封装库--下拉菜单1
08-03
`Base.prototype.hover`用于设置元素的`onmouseover`和`onmouseout`事件，分别绑定`over`和`out`两个回调函数。 此外，我们还封装了一个简单的JavaScript库，使用`$`作为选择器函数。`Base`构造函数接收一个或多个...
xss-vuln学习通关总结
08-24
这种攻击最初因为涉及跨域而得名，但随着JavaScript的发展和前端应用的复杂化，是否跨域已不再是判断XSS攻击的关键。 **XSS漏洞的产生原因** 1. **缺乏输入过滤**：当Web应用在接受用户输入时没有进行严格的过滤和...
onmouseover事件
qq_73686203的博客
09-28 1063
onmouseover：鼠标从元素上移出。
JS 鼠标事件onmouseover：鼠标移到某元素之上;onmouseout：鼠标从某元素移开
幻
08-10 1万+
window.onload=function(){ var img=document.getElementsByTagName(&amp;amp;amp;amp;quot;img&amp;amp;amp;amp;quot;)[0]; img.onmouseover=function(){ ...
onmouseover（HTML元素）
culi4814的博客
08-13 4481
描述 (Description) The onmouseover attribute is one of the most commonly used event attributes. It captures the moment that a cursor crosses the boundary of an element, moving from outside to inside th...
JS鼠标事件onMouseOver和onMouseOut的坑
qq_33715850的博客
12-29 1570
JS鼠标事件onMouseOver和onMouseOut的坑
JS学习之onmouseover事件与onmouseout事件实现
07-11 332
很简单，直接上代码 html: 1 <tr onmouseover="mover('userName1')" onmouseout="mout('userName1')" id="userName1"> 2 <td> 3 姓名 4 ...
onmouseover和onmouseout事件
06-28
### 回答1： onmouseover和onmouseout是JavaScript中的两个事件，用于在鼠标移动到或移出某个元素时触发相应的操作。 onmouseover事件在鼠标移动到某个元素上时触发，常用于实现鼠标悬停效果，比如当鼠标移动到一个链接上时，链接的颜色或背景色会发生变化。 onmouseout事件在鼠标移出某个元素时触发，常用于实现鼠标离开效果，比如当鼠标移出一个链接时，链接的颜色或背景色会恢复原来的状态。 ### 回答2： onmouseover和onmouseout事件是JavaScript中常用的事件类型，用于鼠标指针在HTML元素上移动时触发相应的事件。 当鼠标指针移动到HTML元素上时，就会触发onmouseover事件。这时可以执行一些特定的操作，比如改变元素的颜色、添加一些效果、显示提示信息等。当鼠标指针离开该元素时，就会触发onmouseout事件，也可以执行一些特定的操作。 这两个事件常常被用于交互式设计中，可以在鼠标的移动和点击等事件中应用。比如，在网页中经常会用到鼠标指向链接时出现的提示信息，这种操作就是基于onmouseover事件来实现的。又比如，在制作导航栏时，可以利用onmouseout事件来隐藏下拉菜单。 除了简单的颜色、样式等效果，onmouseover和onmouseout事件还可以对元素的属性和内容进行修改。可以改变元素的文本、图片、背景色、透明度等，实现更多样的效果和交互体验。 但需要注意的是，onmouseover和onmouseout事件一般只能用于鼠标的移动交互，如果需要响应鼠标的点击事件，可以使用onclick事件来代替。 总的来说，onmouseover和onmouseout事件是JavaScript中非常有用的事件类型，可以用于丰富网站的交互及用户体验。需要合理运用，避免显得过于繁琐或复杂。 ### 回答3： onmouseover和onmouseout事件都是Javascript中常见的事件。onmouseover事件是当鼠标光标移到一个HTML元素上时触发。当鼠标移动到元素上时，可以通过onmouseover事件来触发一些特定的动作或操作。这些特定的操作可以包括改变元素的样式或显示某些信息。onmouseover事件可以用于创建交互式的网页，例如为菜单、按钮等添加悬停提示。 而onmouseout事件则是当鼠标光标移出一个HTML元素时触发。当鼠标从元素移开时，可以通过onmouseout事件来恢复元素的状态或执行某些操作。例如：当鼠标移出一个菜单时，可以取消菜单的显示。 这两个事件都可以在HTML标签中使用或通过Javascript来添加。可以使用addEventListener()函数来添加这些事件。例如： ```javascript document.getElementById("myElement").addEventListener("mouseover", function(){ alert("Hello World!"); }); ``` 在上面的示例中，当鼠标移动到id为“myElement”的HTML元素上时，将会弹出一个“Hello World！”的提示。同样，可以使用onmouseout事件来添加功能等。 总之，在网页制作过程中，onmouseover和onmouseout事件是一个非常实用的技术，它们可以帮助我们创建更加丰富和有趣的网页，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值