第十五篇 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 ...
随机推荐
- PHP JSON数据 AJAX
JSON数据的定义方式 //写入数据 var a = { code:"p001", name:"张三", shuzu:new Array(1,2,3,4), j ...
- SQLite 使用主键，ROWID 及自增列
SQLite 使用主键,ROWID 及自增列 之前关注过一些嵌入式数据库,倒时 SQLite 风头更劲,在 Android 上被应用,在 HTML5 中一些浏览器的 Local Database 的实 ...
- LC 244. Shortest Word Distance II 【lock, Medium】
Design a class which receives a list of words in the constructor, and implements a method that takes ...
- 网络通信框架之volley
介绍 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行HTTP通信,Htt ...
- flutter Oops; flutter has exited unexpectedly
使用模拟器时执行flutter run 报出下面一大堆错误 注意只有模拟器有这种问题,真机可以正常运行 Oops; flutter has exited unexpectedly. Sending c ...
- AIxoder插件安装及使用
参考:https://www.aixcoder.com/#/Download 右边有快捷导航,查看对应需要的问题 1.下载AIxcoder 2.安装并注册打开 3.给IDE安装 4.验证是否安装成 ...
- idea中git远程版本回退
idea中git远程版本回退 2017年10月15日 15:25:36 gomeplus 阅读数:19313 工作中遇到git远程仓库需要回退到历史版本的问题,根据网上的搜索结果结合自己的实践,整理了 ...
- Java多线程(1)：3种常用的实现多线程类的方法
(1) 继承java.lang.Thread类(Thread也实现了Runnable接口) 继承Thread类的方法是比较常用的一种,如果说你只是想起一条线程.没有什么其它特殊的要求,那么可以使用Th ...
- shader飞线改进版
项目github地址:https://github.com/ecojust/flyline 前面写过一个飞线(基于THREE.Line进行的颜色变化),只是简单地将可视区片元颜色的alpha通道值设为 ...
- Python面试-websocket及web框架
一.Websocket 1. websocket概念 在讲websocket之前,我们先来看看ajax轮询和long poll的实现机制. A. ajax轮询 ajax轮询的原理非常简单,让浏览器隔 ...