zoukankan      html  css  js  c++  java
  • Javascript+css实现下拉菜单

    <!--程序2-11-menu.html-->
    <html>
    <head>
        <title> 下拉菜单实例</title>
    <script language = "javaScript">
    //鼠标移动到菜单选项时显示对应的div
    function show(menu)
    {document.getElementById(menu).style.visibility = "visible";}
    //当鼠标移出时隐藏所有div
    function hide()
    {document.getElementById("menu1").style.visibility = "hidden";
    document.getElementById("menu2").style.visibility = "hidden";
    document.getElementById("menu3").style.visibility = "hidden";
    }
    </script>
    </head>
    <body>
    <table>
    <tr bgcolor = "#9999FF" align = "center">
    <td width = "120" onMouseMove = "show('menu1')" onMouseOut = "hide()">系列课程</td>
    <td width = "120" onMouseMove = "show('menu2')" onMouseOut = "hide()">教学课件</td>
    <td width = "120" onMouseMove = "show('menu3')" onMouseOut = "hide()">课程大纲</td>
    </tr>
    </table>
    <div id = "menu1" onMouseMove = "show('menu1')" onMouseOut =  "hide()"
        style = "background:#9999ff;position:absolute;left:12;top=38;width=120;
        visibility : hidden">
        <span>c++</span><br>
        <span>java</span><br>
        <span>c#</span><br>
    </div>
    <div id = "menu2" onMouseMove = "show('menu2')" onMouseOut =  "hide()"
        style = "background:#9999ff;position:absolute;left:137;top=38;width=120;
        visibility : hidden">
        <span>c++课件</span><br>
        <span>java课件</span><br>
        <span>c#课件</span><br>
    </div>
    <div id = "menu3" onMouseMove = "show('menu3')" onMouseOut =  "hide()"
        style = "background:#9999ff;position:absolute;left:260;top=38;width=120;
        visibility : hidden">
        <span>c++大纲</span><br>
        <span>java大纲</span><br>
        <span>c#大纲</span><br>
    </div>
    </body>
    </html>

     onMouseMove在鼠标移动时就会响应onMouseOver 在鼠标进入响应区域时响应

  • 相关阅读:
    边框的作用之产生相对margin
    css3 实现切换显示隐藏效果
    Vue 获取数据、事件对象、todolist
    Vue 双向数据绑定、事件介绍以及ref获取dom节点
    Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染
    Vue 安装环境创建项目
    进程&线程
    生成Excel
    JQuery input file 上传图片
    0908期 HTML 样式表属性
  • 原文地址:https://www.cnblogs.com/gride-glory/p/7828068.html
Copyright © 2011-2022 走看看