第十五篇 JS 移入移出事件 模拟一个二级菜单
JS 移入移出事件 模拟一个二级菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二级菜单，鼠标移出和移入事件</title>
<style>
ul li{
/*取消 li前面的黑点*/
list-style:none;
}
#er{
/*让二级ul移动到 一级ul下面去*/
margin:5px 0 0 -40px;
/*因为做二级菜单效果，它先是隐藏的*/
display: none;
}
</style>
</head>
<body>
<div onclick="dianji()">点击我</div>
<ul onmouseover="yiru()" onmouseout="yichu()">
<li>我的</li>
<li>
<ul id="er">
<li>个人资料</li>
<li>密码安全</li>
</ul>
</li>
</ul>
<br/><br/><br/><br/>
<p>那么onclick是点击事件，我们还有鼠标移入事件和移出事件</p>
<p>onmouseout是移出事件，onmouseover是移入事件</p>
<p>移入事件，鼠标移动到某个元素上，这个元素触发onmouseover事件</p>
<p>我们在第一个ul里给出移入事件和移出事件，再到JS里去写函数</p>
<p>注意：<br/>ul是块级元素，是整行的，同学们可以自己加个背景颜色看效果<br/>
显示出来的二级ul也是块级元素，它会占用自己的位置而影响之后的元素</p>
<script>
function dianji(){
//这里简单测试一下 onclick点击事件
alert('嗨，同学们好！');
}
//function关键字 定义 函数 yiru()
function yiru(){
var erji = document.getElementById("er");
//找到二级ul的ID，然后修改它的样式，就可以显示出来了
erji.style.display="block";
}
//那么移出事件是同一个意思，就是反过来即可
function yichu(){
var erji = document.getElementById("er");
//找到二级ul的ID，然后修改它的样式，就可以显示出来了
erji.style.display="none";
}
</script>
</body>
</html>
第十五篇 JS 移入移出事件 模拟一个二级菜单的更多相关文章
- 【移入移出事件练习】【菜单】【选项卡】 -------this使用
鼠标移入移出事件练习 建一个长100x100的红色 div,鼠标移入变为200x200绿色 .a { width:100px; height:100px; background-color:red ; ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- Bootstrap入门（二十五）JS插件2：过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...
- 跟我学SpringCloud | 第十五篇：微服务利剑之APM平台（一）Skywalking
目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...
- 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里？（译）
解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...
- Python之路【第十五篇】：Web框架
Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...
- 第十五篇 Integration Services：SSIS参数
本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...
- Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
随机推荐
- ASP.NET Core开发者指南（转发）
ASP.NET Core开发者指南 2019年ASP.NET Core开发者指南: 你可以在下面找到一张图,该图展示了你可以选取的路径及你想学习的库,从而成为一名 ASP.NET Core 开发者.& ...
- 五十五：WTForms表单验证之渲染模板
此功能看似强大,实则鸡肋 from wtforms import Form, StringField, BooleanField, SelectFieldfrom wtforms.validators ...
- kvm简介及创建虚拟化安装（1）
kvm虚拟化介绍 一.虚拟化分类 1.虚拟化,是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机.在一台计算机上同时运行多个逻辑计算机,每个逻辑计算机可运行不同的操作系统,并且应用程序都可以在相互独立 ...
- Django Model 基础数据库操作应用
https://blog.csdn.net/Mrzhangjwei/article/details/53001841 一.数据库操作1.创建model表 基本结构: from django.db im ...
- 生成器send方法、递归、匿名函数、内置函数
今日内容 1.生成器的send方法. 2.递归:函数自己调用自己 3.匿名函数 4.内置函数 生成器send方法 send的工作原理 1.send发生信息给当前停止的yield 2.再去调用__nex ...
- Python知识点面试题
一. DB类 索引相关: 1. mysql索引种类 2. 什么是覆盖索引? MySQL目前主要有以下几种索引类型:1.普通索引2.唯一索引3.主键索引4.组合索引:遵循最左前缀规则5.全文索引 其他: ...
- OpenStack组件——Glance镜像服务
1.glance介绍 Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚拟机镜像的metadata及 ...
- C学习笔记-枚举
枚举定义 可以使用枚举(enumerated type)声明代表整数常量的符号名称,关键字enum创建一个新的枚举类型 实际上,enum常量是int类型的 枚举的本质就是int型的常量 enum sp ...
- 为什么要学习Hive
一 为什么要学习HIVE? 为什么不是ORACLE和MYSQL? 因为大数据时代 数据量成几何倍数增长,并且数据量非常庞大.大到要用PB EB这种量级去衡量.而我们的ORACLE/MYQL这种 ...
- 新建项目报错'/Users/yanguobin/IdeaProjects/Demo/pom.xml' already exists in VFS
出现该情况的原因:是删除的时候并没有删除干净,点击如下位置会清除Idea的本地代码历史,然后重新创建项目就可以了