javascript中onmouseover事件实例

最新推荐文章于 2023-11-18 09:20:01 发布
最新推荐文章于 2023-11-18 09:20:01 发布
阅读量2.5k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript div function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sikychen/article/details/609229
本文通过一个简单的HTML页面展示了如何使用JavaScript实现元素之间的交互效果。当鼠标悬停在不同颜色的方块上时，会显示对应的文本内容。这个例子有助于理解基本的DOM操作及事件监听。

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

<html>
<head>

 <script language="javascript">
  
  var currid=0;
  var preid=0;
  
  function showlayer(obj)
  {
   if(preid!=0)
   {
    var prediv=document.getElementById("type"+preid);
    prediv.style.display="none";
   }
   
   currid=obj.id;
   var currdiv=document.getElementById("type"+currid);
   currdiv.style.display="";
   preid=currid;
  }
  
 </script>
 

</head>
<body>

 
 
  <div id=1  onmouseover="showlayer(this);" style="background-color:red;">Helloworld</div>
  <div id=type1 style="display:none;">Hello, world</div>
 
 
 
  <div id=2  onmouseover="showlayer(this);" style="background-color:green;">myfriend世界</div>
  <div id=type2 style="display:none;">myfriend, 世界</div>
 

<body>
</html>

sikychen
关注
onmouseover事件和onmouseout事件全面理解
11-22
这两天接触了onmouseover事件和onmouseout事件，一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件，但是突然发现这些只是对它们简单的描述，下面让我们一起看看它们终究还有神马奇怪的特性，是好还是坏呢？ 　　首先实现一个盒子： 　　给这个盒子上绑定上onmouseover事件和onmouseout事件 　　发现它们不会发生什么问题，然后（嘿嘿，你懂得！） 　　让我们创建一个B元素，让它被嵌套在A元素中，作为A的子元素 　　我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件，你会发现发生什么
JavaScript oncopy事件用法实例解析
10-15
其中，oncopy事件是JavaScript中的一个事件处理器，它在用户尝试复制某个元素的内容时触发。这个事件可以用来执行一些操作，比如当内容被复制时提供反馈或者禁止单元格的内容被复制。 oncopy事件通常用于防止用户...
JavaScript中的onmouseover事件和onmouseout事件实例
热门推荐
平凡的平淡的博客
09-28 6万+
目录 JavaScript事件 onmouseover事件 onmouseout事件： onmouseover和onmouseout事件结合案例： HTML部分 CSS部分 javascript部分 最终效果： JavaScript事件 事件可以是浏览器行为，也可以是用户行为！ 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点...
JS—函数实现轮播图
LSQ_2584951836的博客
08-20 318
简单轮播图案例 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
前端---js中onmouseover和onmouseout事件
Nagile-zhou博客
09-27 9955
在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmouseout这两个事件来实现的操作.   1.onmouseover定义和用法 onmouseover 事件会在鼠标指针移动到指定的对象上时发生。 语法 onmouseover="Some...
JavaScript触发函数onmouseover，onmouseout，onfocus，onblur综合实例
生活中的思索
09-01 1653
<!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.backgroundColor="red"; } function disFuction(x){ x.style.backgroundColor="white"; } </script> </head> <body> 请输入英文字符：<input type=
JavaScript实例教程
06-22
在互联网技术中，...通过本次教程，我们学习了JavaScript中事件处理程序的概念、常用事件以及如何通过实例掌握常用浏览器对象。这将为前端开发人员提供一个很好的基础，使他们能够创建更丰富、更具交互性的网页。
javascript中字体浮动效果的简单实例演示
10-23
在本实例中，我们将利用`display`属性控制下拉列表的显示与隐藏。默认情况下，下拉列表的`display`设置为`none`，即不显示；当鼠标悬停在父元素上时，将其更改为`block`，使下拉列表显现；当鼠标离开时，再恢复为`...
JavaScript常见鼠标事件与用法分析
10-17
在前端开发中，JavaScript提供了丰富的事件处理机制，其中鼠标事件是用户与网页交互中最常见的交互方式之一。本文将详细介绍JavaScript中常见的鼠标事件以及它们的用法，旨在为前端开发者提供参考与帮助。 首先，...
js常用事件总结及案例-onMouseOver、onMouseOut
成长日记的博客
05-26 2348
常见事件案例：onFocus   onBlur   onChange   onSubmit    onMouseOver   onMouseOut 案例四：onMouseOver（鼠标移入时触发的事件）   onMouseOut（鼠标移出时触发的事件）         function mov(){             var a = document.getElementById(
HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解
Alan_Lowe
08-18 1404
HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick 1.onmouseover和onmouseout 根据单词的意思就可以看出这两个属性是鼠标悬停在元素上方和鼠标离开元素的意思，实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>悬停和点击</title>
js的事件
最新发布
2301_80137119的博客
11-18 783
onclick-----鼠标点击某个对象ondblclick----鼠标双击某个对象onmouseover---鼠标被移到某元素之上onmouseout---鼠标从某元素移开onmousemove----某个鼠标按键被按下onmouseup----某个鼠标按键被松开oncontextmenu---右键事件onmousewheel-- 当滚轮被滚动的时候。
java onmouseover_第8天：javascriptDOM小 案例、onmouseover 、onmouseout
weixin_36288711的博客
02-16 181
案例为元素注册点击事件，弹出对话框//定义函数function f1(){alert("开发分离的html和js代码");}//根据id获取这个标签(元素)var btnObj = document.getElementById("btn");//为按钮注册点击事件//注意f1不加括号 不然f1()，页面加载时就执行了//该注册方式不是最好的btnObj.onclick =f1;//根据id属性的...
Javascript>> onmouseover用法
CodingIsFun
07-22 4458
<!DOCTYPE html> <html> <head> <title>Window Title</title> </head> <body> <p>Test your mouse on me!</p> <script> const p = document.quer...
js中的事件-鼠标悬浮和离开事件onmouseover和onmouseout
小丁的博客
11-14 2395
js中的事件-鼠标悬浮和离开事件 onmouseover 和 onmouseout
JS中的鼠标事件
m0_70185826的博客
07-01 1万+
通过鼠标触发事件，类似用户的行为：mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。 MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。 0代表左键 1代表中键 2代表右键 2. MouseEvent.clientX，MouseEvent.clientY MouseEvent.clientX属性返回鼠标位置相对于浏
JS学习之onmouseover事件与onmouseout事件实现
07-11 389
很简单，直接上代码 html: 1 <tr onmouseover="mover('userName1')" onmouseout="mout('userName1')" id="userName1"> 2 <td> 3 姓名 4 ...
js onmouseout 问题
weixin_30814223的博客
09-26 105
js的onmouseout有很奇怪的一个问题。例如<div onmouseout="alert(123)"> <a href="#">test</a></div>我们预期只有当鼠标从div中移开的时候才会触发onmouseout事件，可是，事实上，当我们移到div中的元素时，例如本例中的a标签时，就 会触发onmousout事件。也就是说，移到...
JavaScript网页特效代码实例详解
JavaScript提供了一系列的事件处理函数和对象，如`addEventListener`、` onclick`、` onmouseover`等，来捕捉和处理这些事件。 - **动画实现**：使用JavaScript可以创建页面上的动画效果，包括淡入淡出、滑动、大小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值