JavaScript中的onmouseover事件和onmouseout事件实例
目录
JavaScript事件
onmouseover事件
onmouseout事件:
onmouseover和onmouseout事件结合案例:
HTML部分
CSS部分
javascript部分
最终效果:
JavaScript事件
事件可以是浏览器行为,也可以是用户行为!
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
JavaScript中的 事件类型有很多种,比如:
1、按钮的单击事件。
2、鼠标悬浮在某个图片上,有着特殊效果。
3、鼠标离开某个图片上,效果消失。
4、使用键盘上某个键,后出现效果。
5、等等……
onmouseover事件
onmouseover事件:指鼠标移动都某个指点的HTML标签上,会出现什么效果。
例如:
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseover = function (){alert("鼠标已经移动上来!");
}
onmouseout事件
onmouseout事件:指鼠标移出某个指点的HTML标签后,会出现什么效果。
例如:
var p = document.getElementById("p") /*获取id名字为p的标签*/
/* 给获取到的id添加事件 */
p.onmouseout = function (){alert("鼠标已经移出!");
}
onmouseover和onmouseout事件结合案例:
HTML部分
<!-- 按钮 --><label id="info"><input type="checkbox" />免登录十天</label>
<!-- 弹框 --><div class="div_dis">请注意在安全模式下,单击按钮,请勿在网吧或公共场所使用免登录十天</div>
CSS部分
*{margin:0;padding:0;
}.div_dis{padding: 10px 10px;width: 200px;height: 60px;border: 1px #f00 solid;background: yellow;opacity: 0.6;position: absolute;top: 0;left: 120px;display: none;
}
javascript部分
/* 找元素---找对象 */var oInp = document.getElementById("info");var oDiv = document.getElementsByClassName("div_dis")[0];
/* 操作元素---搞对象 *//* 鼠标一上去之后 */oInp.onmouseover = function (){oDiv.style.display = "block";oInp.style.cursor = "pointer";}/* 鼠标移出之后 */ oInp.onmouseout = function (){oDiv.style.display = "none";}
最终效果:
onmouseover时
onmouseout时
JavaScript中的onmouseover事件和onmouseout事件实例相关推荐
- 深度理解onmouseover事件和onmouseout事件
今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的 ...
- JavaScript中的BOM操作的常见事件
BOM操作的常见事件 1.点击事件clcik onclcik绑定点击 标签ID.onclick = function(){ 程序: } 示例1. d1.onclick = function(){ co ...
- JavaScript中 onclick()、click()触发点击事件的区别
function load(){ //下面两种方法效果是一样的document.getElementById("target").onclick();document.getEle ...
- javascript中的call()和apply()方法 - 原创实例
1.方法定义 call方法: 语法:call([thisObj,arg1, arg2,arg--n]) ,参数arg只能为列表的形式,如:a,b,c 定义:调用一个对象的一个方法,以另一个对象替换当前 ...
- 前端---js中onmouseover和onmouseout事件
在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmo ...
- 事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
- DOM事件与jQuery事件的是非纠葛
在javascript和JQuery之中,都有事件的处理方式,在我们编写程序实现某些功能的时候,我们会发现使用原生的DOM事件与JQuery中封装的事件都能实现同样的效果,那么也许我们会认为他们之间的 ...
- Javascript中的类实现
Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门 ...
- JavaScript中错误正确处理方式,你用对了吗? 1
JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上 ...
- javascript中实例方法与类方法的区别
在javascript中,类有静态属性和实例属性之分,也有静态方法和实例方法之分 类属性(静态属性):通过类直接访问,不需要声明类的实例来访问 类方法(静态方法):通过类直接访问,不需要声明类的实例来 ...
最新文章
- Java帝国对Python的渗透能成功吗?
- @poj - 1509@ Glass Beads
- python好找工作吗2017-2018年七大工作机会最多的编程语言和技术!
- 持志助中华 九州初志开创国内集群存储新时代
- 北邮 复习 软件工程_软件工程的一些基本概念总结(北邮版本)
- Citrix XenApp 下载及一年 developer license 获取
- 台式无线网卡管理服务器,台式电脑设置wifi上网
- 8086控制转移指令学习笔记
- 使用高级程序设计语言实现集合的交并差运算
- 基于websocket的聊天实现逻辑(springboot)
- ROW_NUMBER (Transact-SQL)
- vs 2005 thread 无法调试
- java数组转为字符串_join()和toString()方法 将数组转换为字符串
- php 查询access数据库操作,php操作access数据库的方法详解
- WebStorm上vue模板设置
- 语音输入是计算机在哪个领域的应用,语音识别技术是什么_语音识别技术应用领域介绍...
- 在V2EX的开发环境里尝试了一下OneAPM @livid
- 设置网页默认为360浏览器极速模式打开
- 计算机绩点3.2算什么水平,绩点3.3代表什么水平
- mybatis-plus分页查询三种方法
热门文章
- 火车进出栈【卡特兰数】【高精度】【压位】【压int位】
- android ios mp4格式转换,爱思助手怎么转换视频格式 爱思助手将普通视频格式转换为mp4格式方法...
- 外卖私域流量:微信社群的运营和羊毛经济
- 全市场等权中位数_市场指数估值周报20200412
- kali2022.1google输入法
- 使用调色板(Palette)API 获取颜色
- codevs 1253 超级市场 DP 解题报告
- pe系统进服务器2008,怎么用U盘启动win server 2008 pe?
- 第三届同花顺算法大赛 | 2022 | AI算法
- 搜狗提交软件之搜狗泛目录大量泛收录