鼠标事件之onMouseOver和onMouseOut用法

最新推荐文章于 2023-07-05 23:37:25 发布
原创 最新推荐文章于 2023-07-05 23:37:25 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了onMouseOver与onMouseOut事件在网页元素上的应用，特别是对于不同类型的HTML元素如按钮和文本框等的区别。指出在div等容器元素中使用时可能会出现的问题，并提供了解决方案，建议使用onmouseenter与onmouseleave代替。
onMouseOver和onMouseOut分别代表鼠标的移入和移出事件.但是在用的时候特别要注意移入和移出"对象"是什么

input type=text 对象代表文本区域
input type=button 对象代表按钮区域
这些是很容易理解的

但是在div中加入的话,里面应该有标签,那么鼠标停留在这个标签边缘就会一直执行这两个操作

我曾经试图用onMouseOver和onMouseOut实现鼠标进入表格执行一个操作,离开表格执行一个操作.这才发现onMouseOver和onMouseOut不能随便用.

要实现上述功能不能在外面加入<div onmouseout="aa()" onmouseover="bb()"><table></table></div>

而是要用<table id="itemopen" onmouseleave="aa()" onmousenter="bb()"></table>

需要注意一下.


总结:onMouseOver和onMouseOut操作发生在有边线的标签移入和移出时.
Web前端之鼠标悬浮，鼠标移入和鼠标移出、getElementById、onmouseover、onmouseout、mouseenter、mouseleave、hover
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
08-19 3761
Web前端之鼠标悬浮，鼠标移入和鼠标移出、getElementById、onmouseover、onmouseout、mouseenter、mouseleave、hover
onMouseover的灵活运用
06-22 4316
很多有过页面制作经验的人，为了丰富页面的动感，在设计数量众多的按钮时，通常都喜欢采用onMouseover这个函数。其效果就是当鼠标划过按钮时，按钮看起来会有一种起伏变化，从而成为一种独特的信息提示。 　　关于onMouseover可以有四种基本的表现形式：一图对一图、一图对多图、多图对一图、多图对多图。下面就让我们一一道来： 　　一图控制一图 　　开题中我们提到的这种效果就是一图对一图，它仅仅控
onmouseover事件和onmouseout事件全面理解
09-01
最近两天在温习onmouseover事件和onmouseout事件，其实里面有很多深奥的知识，接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解，感兴趣的朋友一起看下
【转】onmouseout 等一系列事件的用法简单举例
sl159的专栏
09-05 1165
onmouseout、onmouseover、onkeydown、onkeyup、onkeypress等事件。 onmouseout 事件，会在鼠标指针移出指定的对象时发生。 实例 1 在下面的例子中，我们将在鼠标指针移出图像时显示一个对话框： <img src="/i/example_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才离
onmouseover和onmouseout事件
M_ik_Z的博客
05-20 771
onmouseover和onmouseout事件： 案例1：表格的隔行换色 style代码： <style> *{ margin: 0; padding: 0; } table{ width: 80%; line-height: 50px; text-align: center; border: 1px solid #eee; margin: 50px auto; border-collapse: collapse; }
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
10-30
在本篇文章中，我们将探讨如何使用CSS和JavaScript来实现兼容IE和Firefox的鼠标经过效果（onmouseover和onmouseout）。在前端开发中，鼠标经过效果是一个非常常用的交互效果，然而不同的浏览器对其支持的方式不同，...
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现–简短版
12-12
本篇文章将探讨如何实现一个简短的兼容IE和Firefox的鼠标经过事件（onmouseover和onmouseout）的解决方案。 首先，让我们了解这两个事件。`onmouseover`事件在鼠标指针进入一个元素时触发，而`onmouseout`事件则在...
onmouseover和onmouseout的一些问题思考
09-05
为实现跨浏览器兼容的解决方案，可以使用`onmouseover`和`onmouseout`，并通过检查事件的`relatedTarget`或IE特有属性`fromElement`和`toElement`来模拟`onmouseenter`和`onmouseleave`的行为。下面的示例代码展示了...
onmouseover和onmouseout的用法
最新发布
08-06
### `onmouseover` 和 `onmouseout` 事件的用法 在网页开发中，`onmouseover` 和 `onmouseout` 是用于响应鼠标指针进入和离开元素时的事件处理程序。它们常用于实现交互效果，例如悬停高亮、动态提示、菜单展开等。...
js鼠标事件onmouseover与onmouseout多次触发
weixin_30362083的博客
08-06 923
原因：冒泡和捕获 建议使用onmouseenter与onmouseleave代替 转载于:https://www.cnblogs.com/223zzm/p/11311772.html
onmouseover事件的用法
01-20 1127
当鼠标   onmouseover   一个时，怎么改变td里面的控件属性，比如（背景，字体颜色） 1234
js中的鼠标事件的onmouseover和onmouseout如何用
10-28 858
鼠标放在上面就知道了 js代码： function mouseOver(o) {         o.style.backgroundColor = "red"; } function mouseOut(o) {         o.style.backgroundColor = "blue"; }  移动上来             function $(e
onmouseover和onmouseout事件小结
热门推荐
brokenkay的博客
06-30 1万+
前言 onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明 我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...
onmouseover和onmouseout的使用
weixin_45742613的博客
11-16 748
onmouseover和onmouseout的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <
深度理解onmouseover事件和onmouseout事件
08-15 595
　　今天简单的讲解下onmouseover事件和onmouseout事件，一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件，但是突然发现这些只是对它们简单的描述，下面让我们一起看看它们终究还有神马奇怪的特性，是好还是坏呢？ 　　首先实现一个盒子： 　　　　　　 　　给这个盒子上绑定上onmouseover事件和onmouseout事件...
Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子
Cosmoshhhyyy的博客
07-05 2297
onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout的用法和效果，以及例子代码等。
onmousemove、onmouseout事件
weixin_49756833的博客
05-16 7535
首先我们看文章之前，得把onmousemove和onmouseout搞明白到底是个什么东西来的，先看理论： onmousemove：事件会在鼠标指针移动到指定的对象上时发生。 onmouseout：事件会在鼠标指针移出指定的对象时发生。 简单点来说就是一个是移入进去时触发，一个是移出时触发，也可以叫它们为移入事件和移出事件。 话不多说，先来看一组代码，如下： 可以看出我HTML给了一个div，是一个正方形，里面带了...
onmouseover、onmouseenter、onmouseleave、onmouseout的区别
huangfuyk.的博客
03-06 4402
1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件，支持冒泡。 2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件，不支持冒泡。 3、onmouseover、onmouseenter、onmouseleave、onmouseout均支持的HTML标签：    &n...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值