zoukankan      html  css  js  c++  java
  • JavaScript一个简单的显示隐藏功能

    代码示例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>显示隐藏</title>
     6     <style type="text/css">
     7         *{
     8             margin: 0;
     9             padding: 0;
    10             list-style: none;
    11         }
    12         #box{
    13             width: 200px;
    14             margin: 0 auto;
    15             /*下面两行被子级元素继承*/
    16             font: 15px;
    17             font-family: "simhei";
    18         }
    19         #span{
    20             /*宽72px,高26px*/
    21             display: inline-block;
    22           width: 70px;
    23            height: 24px;
    24            border: 1px solid gray;           
    25             text-align: center;
    26             /*行高和高度一致则垂直居中*/
    27             line-height: 24px;
    28         }
    29         #ul{
    30             /*宽72px,高106px*/
    31            width: 70px;
    32            height: 104px;
    33            border: 1px solid gray;
    34            margin-top: 3px;
    35            line-height: 25px;
    36            text-align: center;
    37            display: none;
    38         }
    39         #ul li:hover{
    40           background: blue;
    41         }
    42     </style>
    43 </head>
    44 <body>
    45     <div id="box">
    46         <span id="span">设置</span>
    47         <ul id="ul">
    48             <li>搜索设置</li>
    49             <li>高级设置</li>
    50             <li>关闭预测</li>
    51             <li>搜索历史</li>
    52         </ul>
    53     </div>
    54 </body>
    55 </html>
    56 <!--
    57    HTML是结构,css是样式,javascrip是行为
    58    使用JavaScript完成一个简单的显示隐藏效果
    59    下面代码的解析:从文档中获得span元素的内容,当鼠标经过或者离开span也就是设置这一元素区域时,触发函数,函数功能是修改display是否展示
    60  -->
    61 <script type="text/javascript">
    62     document.getElementById('box').onmouseover=    function(){
    63         document.getElementById('ul').style.display='block';
    64     };
    65     document.getElementById('box').onmouseout=function(){
    66         document.getElementById('ul').style.display='none';
    67     };
    68 </script>

    初始效果:

    鼠标经过元素区:

    鼠标离开还原

  • 相关阅读:
    Spring Controller 获取请求参数的几种方法
    JSP ajax跨域问题 怎么处理 原因:CORS 头缺少 'Access-Control-Allow-Origin')。 ajax http 415
    仿微信滑动返回
    App重新启动
    NetWorkUtils
    ProgressWheel
    没有系统头部的dialog
    仿微信添加触摸图片阴影效果
    循环滚动TextView
    java 分割字符串后放入List中
  • 原文地址:https://www.cnblogs.com/zjm1999/p/10212796.html
Copyright © 2011-2022 走看看