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. 让SpringBoot工程支持热部署

    下载地址:https://files.cnblogs.com/files/xiandedanteng/SpringBootWeb-1_20190928.rar 修改Java文件后,每次要重启才好用,修 ...

  2. 在win10系统安装两个不同版本的mySQL数据库

    我们项目用的mySQL数据库,为了回家看代码方便,于是在本地安装mySQL数据库,一开始安装了比服务器mySQL5.7.24更高版本的mySQL8.0.11,结果项目启动报错,估计是版本太高项目中引入 ...

  3. [go]go并发

    同步协程 通过睡眠方法 // 通过睡眠方式等待 time.Sleep(time.Second) <-time.NewTimer(time.Second).C <-time.After(ti ...

  4. 前端Ajax跨域解决方案

    业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...

  5. 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_5 响应之使用forward和redirect进行页面跳转

    这个方式用的比较少. forward 转发或者重定向 返回forward关键字就表现现在想使用的就是请求转发 redirect

  6. python对列表中名字进行修改，在每个名字后面加入‘the Great’

    第一种方法:使用enumerate函数 def make_great(magicians): for i ,name in enumerate(magicians): magicians[i] = m ...

  7. SQL学习（三）Select语句：返回前多少行数据

    在实际工作中,我们可能根据某种排序后,只需要显示前多少条数据,此时就需要根据不同的数据库,使用不同的关键字 一.SQL Server/Access select top 数量/百分比 from tab ...

  8. c++ qsort函数应用

    C++ qsort在"iostream" c在头文件stdlib.h中,strcmp在string.h中.下列例子默认从小到大排序即(a>b返回>0),反之从小到大排序 ...

  9. 【D3D12学习手记】CPU/GPU Synchronization

    由于有两个并行运行的处理器(CPU和GPU),会出现许多同步问题.假设我们有一些资源R存储了我们希望绘制的某些几何体的位置. 此外,假设CPU更新R的数据以存储位置p1,然后将引用R的绘图命令C添加到 ...

  10. 前端常用资源地址: http://www.htmleaf.com/

    前端常用资源地址: http://www.htmleaf.com/