第十五篇 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 ...
随机推荐
- MySQL5.7快速修改表中字段长度
在mysql 5.5版本时,商用环境升级,有一个表存在六千多万数据,升级时需要修改这个表其中一个varchar类型字段的长度,当时用了大概4个多小时,还没有结束,之后我们系统mysql升级到5.7版本 ...
- C#产生随机验证码的代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- vue 登录路由判断
router.beforeEach((to, from, next) => { // alert(sessionStorage.getItem('accessToken')) // consol ...
- iOS 应用"无法安装应用程序 因为证书无效"的解决方案
原因是由于iOS7.1要安装企业应用,url必须是https的,不能是http,这就要求我们的服务器要支持https.因此,只要将原链接: itms-services://?action=downlo ...
- 八十三：redis之redis的字符串、过期时间、列表操作
字符串操作 设置值 set key value 设置有空格的值,加引号 set username 'hello world' 获取值 get key 删除值:del key 清除所有内容:flusha ...
- paramiko实现登录主机
Paramiko模块使用 实现目的:192.168.0.61通过Paramiko模块登录192.168.0.63 一.下载安装 由于 paramiko 模块内部依赖pycrypto,所以先下载安装py ...
- ubuntu安装dockers过程：
1. 先对系统进行更新 1.1 apt-get upgrade 1.2 去中国关于dockers的网站 http://get.daocloud.io/ 1.3 安装docker curl -sSL h ...
- C++类中的一些细节(重载、重写、覆盖、隐藏，构造函数、析构函数、拷贝构造函数、赋值函数在继承时的一些问题)
1 函数的重载.重写(重定义).函数覆盖及隐藏 其实函数重载与函数重写.函数覆盖和函数隐藏不是一个层面上的概念.前者是同一个类内,或者同一个函数作用域内,同名不同参数列表的函数之间的关系.而后三者是基 ...
- 【HANA系列】SAP HANA SQL合并多行操作
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL合并多行 ...
- Leetcode #9 Easy <Palindrome Number>
题目如图,下面是我的解决方法: class Solution { public boolean isPalindrome(int x) { if(x < 0) //由题意可知,小于0的数不可能为 ...