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. fMRI数据分析处理原理及方法————转自网络

    fMRI数据分析处理原理及方法 来源: 整理文件的时候翻到的,来源已经找不到了囧感觉写得还是不错,贴在这里保存. 近年来,血氧水平依赖性磁共振脑功能成像(Blood oxygenation level ...

  2. css样式重置表

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...

  3. CSS操作表格的边框和表格的属性示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Mysql密码忘记，修改密码方法

    1.set password for ‘root’@’localhost’ = password(‘czllss’); -- czllss为新密码

  5. 6、Kubernetes Pod控制器应用进阶

    定义pod时,在spec字段中常用的定义字段有哪些? master ~]# kubectl explain pods.spec.containers KIND: Pod VERSION: v1 RES ...

  6. SAS数据挖掘实战篇【三】

    SAS数据挖掘实战篇[三] 从数据挖掘概念到SAS EM模块和大概的流程介绍完之后,下面的规划是[SAS关联规则案例][SAS聚类][SAS预测]三个案例的具体操作步骤,[SAS的可视化技术]和[SA ...

  7. Docker在windows环境下的安装部署

    一.准备 系统环境:Windows 10 64bit Docker安装包:Docker for Windows Installer.exe 二.安装步骤 1.开启系统的hyper-v 2. 重启电脑后 ...

  8. 刷新页面后，让控制台的js代码继续执行

    在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...

  9. pytorch基础问题

    本文将自己在pytorch学习中遇见的各种问题整理起来,并且持续更新. 1:torch.Tensor和torch.tensor的区别 开始使用torch.tensor和torch.Tensor的时候发 ...

  10. react正常显示html代码、dangerousSetInnerHTML 笔记

    const html =`<h1>今天天色很好</h1>` <div dangerouslySetInnerHTML={{__html:html}}></di ...