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. 分享如何在github上为代码创建一个链接

    从自学前端到现在差不多一个月了,在此期间,一直有一种困惑,如何将自己电脑中编写的代码生成一个链接,以便可以发布呢?今天有幸被高人指点一二,现将其分享. 第一步,网上注册一个github账号 第二步,新 ...

  2. leetcode 207课程表

    class Solution { public: bool canFinish(int numCourses, vector<vector<int>>& prerequ ...

  3. 求平面上N点最远两点和最近两点距离

    最近两点,二分法 最远两点,凸包+找对踵点

  4. Leaflet - 实现按照路径方向旋转的 Marker

    在每帧动画时设置 Marker 的 transform 属性就行,zjffun/Leaflet.MovingMarker at zjf/feature-rotate 我在这个 Fork 中实现了一下. ...

  5. tensorflow文件读取

    1.知识点 """ 注意:在tensorflow当中,运行操作具有依赖性 1.CPU操作计算与IO计算区别: CPU操作: 1.tensorflow是一个正真的多线程,并 ...

  6. flutter vscode创建objc工程

    通过vscode创建flutter工程时,默认创建的是swift项目工程,如果想要修改,可以通过vscode设置默认创建语言 1. Open vscode settings. Under User S ...

  7. LeetCode.1078-两词出现后的单词(Occurrences After Bigram)

    这是小川的第392次更新,第422篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第254题(顺位题号是1078).给出单词first和单词second,以"fi ...

  8. ArcEngine开发_添加字段，数据删除，插入，更新细节

    一.AE 向已存在的要素类中添加字段 链接:  AE 向已存在的要素类中添加字段 在向已存在的要素类中添加字段的时候,需要用到ICLASS接口.于是,进一步的调整代码如下,问题得以解决 static ...

  9. 实现文件上传功能（FileUpload组件）

    文件上传: 项目中经常用到文件上传. 自己实现文件上传,使用文件上传组件fileupload组件 1.指定表单类型为文件上传, enctype=”multipart/form-data” 2.提交方式 ...

  10. Ubuntu下借助URLOS实现快速安装DzzOffice企业办公套件

    如今,越来越多的个人.团队甚至企业都在使用GSuite或者Office365等网络办公套件,为什么人们越来越喜爱使用网络办公套件?一方面是考虑数字资产的安全性以及管理效率,另一方面则是日益增大的协同办 ...