第十五篇 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 ...
随机推荐
- 阶段3 3.SpringMVC·_06.异常处理及拦截器_4 SpringMVC拦截器之介绍和搭建环境
拦截器可以有多个 搭建环境 不用改,直接finish 复制原来项目的 依赖的包也复制过来 web.xml配置前端控制器 springmvc的配置文件 先创建对应的文件夹 分别创建java和resour ...
- MVC - 单点登录中间件 （转）
http://www.cnblogs.com/wangrudong003/p/6435013.html 本章将要和大家分享的是一个单点登录中间件,中间件听起来高深其实这里只是吧单点登录要用到的逻辑和处 ...
- Git(5)：其他用法
分支操作 (1) 删除远程分支 $git remote add origin ssh://git@xxx.git ##如果未连接远程分支要先连接 $git push origin :<remot ...
- Core 3 WPF MVVM框架 Prism系列之数据绑定
一.安装Prism 1.使用程序包管理控制台# Install-Package Prism.Unity -Version 7.2.0.1367 也可以去掉‘-Version 7.2.0.1367’获取 ...
- idea退出提醒 打开
有时候会误点下面的勾选框,导致以后直接退出,没有提示,很不方便,经常误点关闭,再次打开又要等很久 如何设置回来? File-Setting-Appearance&Beha-System Set ...
- 调用百度api的原理流程
1.为了实现酒店地址的定位 2.使用可视化便捷的百度地图API生成器:设置公司的地址和地图等级 3.设置地图的滚轮.缩放功能 4.获取代码,拷贝到html页面中 5.申请秘钥,在html中引用地图AP ...
- javascript预编译练习（变态篇）
例1. <!DOCTYPE html> <html> <head> <title></title> </head> <bo ...
- git与gitlab工具
1.Git和SVN的对比 1)git是分布式的,svn是集中式的.(最核心) 2)git是每个历史版本都存储完整的文件,便于恢复,svn是存储差异文件,历史版本不可恢复.(核心) 3)git可离线完成 ...
- vim编辑器详解(week1_day3)
vi编辑器 作用:编辑文本文件中的内容的工具 命令历史 末行模式中,以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中 ...
- Linux C/C++基础——内存分区
1.内存分区 在生活中,为了提高办事效率,某个单位经常会分成N个部门,每个部门职责不同,同样,为了提高 效率,我们的内存也会被分成N个区.这里我们将内存分为五个区.也有四区模型. 首先看一下一个二进制 ...