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. 哨兵模式java实例

    /** * 测试Redis哨兵模式 * @author liu */ public class TestSentinels { @SuppressWarnings("resource&quo ...

  2. invalid new-expression of abstract class type 'CurveFittingEdge'

    目录 一 报错原因 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 报错原因 今天遇到了一个之前从未遇到的报错: error: invalid new-expression of abstr ...

  3. 如何在网页中添加 jQuery。

    转自:http://www.runoob.com/jquery/jquery-install.html 网页中添加 jQuery 可以通过多种方法在网页中添加 jQuery. 您可以使用以下方法: 从 ...

  4. Maven-SSM框架整合

    1.创建Maven项目 配置pom.xml依赖 <!-- 允许创建jsp页面 --> <dependency> <groupId>javax.servlet< ...

  5. 八十三：redis之redis的字符串、过期时间、列表操作

    字符串操作 设置值 set key value 设置有空格的值,加引号 set username 'hello world' 获取值 get key 删除值:del key 清除所有内容:flusha ...

  6. Web23_Listener

    记得在web.xml配置<listener-class>监听器的Copy Qualified Name复制类全名</listener-class> <listener-c ...

  7. Swift3.0基础语法学习<一>

    // // ViewController.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/15. // Copyright © 2016年 ...

  8. spring @valid 注解

    用于验证注解是否符合要求,直接加在变量之前,在变量中添加验证信息的要求,当不符合要求时就会在方法中返回message 的错误提示信息. @PostMapping public User create ...

  9. 云计算共享组件--Memcache缓存系统（4）

    一.缓存系统 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告 ...

  10. 云计算共享组件--时间同步服务NTP（2）

    一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行加,而西时区则为减. 地球的轨道并非正圆,在加上自转速度逐年递减, ...