JS 移入移出事件 模拟一个二级菜单

 
老师演示一个特别简单二级菜单，同学们除了学习JS，还要注意它的元素和CSS样式。
这节课介绍的是JS鼠标移入、移出事件：onmouseover是移入事件，onmouseout是移出事件。当然还有其他的事件效果，这里就先不说明了。
先直接上一段代码：
 
<!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>
 
二级ul显示之后，会影响之后的元素比如这里的p元素，那这样做的话，会导致页面乱掉的，用户体验不够友好，所以我们可以在css里面加样式，比如定位咯！
 

第十五篇 JS 移入移出事件 模拟一个二级菜单的更多相关文章

  1. 【移入移出事件练习】【菜单】【选项卡】 -------this使用

    鼠标移入移出事件练习 建一个长100x100的红色 div,鼠标移入变为200x200绿色 .a { width:100px; height:100px; background-color:red ; ...

  2. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  3. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  5. 跟我学SpringCloud | 第十五篇：微服务利剑之APM平台（一）Skywalking

    目录 SpringCloud系列教程 | 第十五篇:微服务利剑之APM平台(一)Skywalking 1. Skywalking概述 2. Skywalking主要功能 3. Skywalking主要 ...

  6. 解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里？（译）

    解剖SQLSERVER 第十五篇  SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...

  7. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  8. 第十五篇 Integration Services：SSIS参数

    本篇文章是Integration Services系列的第十五篇,详细内容请参考原文. 简介在前一篇,我们使用SSDT-BI将第一个SSIS项目My_First_SSIS_Project升级/转换到S ...

  9. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

随机推荐

  1. mongodb游标的使用

    1.插入数据 ;i<;i++){ db.shop.insert({_id:i+,name:+i}) } 2.查看数据数 db.shop.find().count() 3.获取游标.判断是否还存在 ...

  2. EUREKA 删除 or 强制下线/上线 实例

    开发环境,EUREKA 注册中心 某服务被注册了多个实例,feign 调用时 服务请求到其他实例上,请求收不到,使用一下命令删除 或者强制下线实例: 1 .DELETE  删除注册实例,但是如果被删除 ...

  3. Sqlserver实现故障转移 — sqlserver镜像备份实现故障转移（3）

    目的:在已经加域的计算机上安装sqlserver2012,并配置数据库镜像实时同步,并实现故障转移. 在数据库层面实现故障自动转移后,应用程序里改怎么写数据库连接呢?其实使用ADO.NET或者SQL ...

  4. 【HANA系列】SAP HANA SQL计算某日期是当年的第几天

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL计算某日 ...

  5. 【HANA系列】【第七篇】SAP HANA XS使用Data Services查询CDS实体【一】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第七篇]SAP HANA XS ...

  6. script学习,如何用linux监控你的同事？

    环境:CentOS7 一.为什么要学习script命令 当你在终端或控制台上工作时,你想记录下自己做了些什么吗?当你跟一些Linux管理员同时在系统上干活,你想知道别人干了什么吗?当你让别人远程到你的 ...

  7. flask 之(五) --- 对象|钩子|拆分

    内置对象 request: 请求的所有信息 session   服务端会话技术的接口 config:    当前项目的配置信息,模板中可以直接使用 g:global 在单次请求过程中,实现全局数据共享 ...

  8. nginx配置反向代理支持session

    Nginx反向代理tomcat,很是方便,但是也有些细节的问题需要注意:今天遇到了这样一个问题,tomcat中路径“host/web1”,nginx中直接“host/”代理,这时候session就无法 ...

  9. VS2008编译boost1.53

    1. 准备工作:下载boost_1_53_0.zip(bzip2-1.0.6.tar.gz/icu4c-4_4_2-Win32-msvc9.zip/Python-2.5.2.tar.bz2/zlib- ...

  10. 【C++ 学习笔记】 MFC CEdit

    环境:VS2008 -关联变量 方法一:在控件上右键-变量-CEdit类型变量-输入变量名. 方法二:添加代码 头文件中定义变量CEdit m_edit_fileName; 源文件中变量关联DDX_C ...