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>

    初始效果:

    鼠标经过元素区:

    鼠标离开还原

  • 相关阅读:
    parent.relativePath' points at wrong local POM
    'cmd' 不是内部或外部命令,也不是可运行的程序 或批处理文件.
    解析xml文件的几种技术与Dom4j与sax之间的对比
    html/js/css资源
    HTML编码规范
    CSS编码规范
    PCB标识说明
    sama5d3 环境检测 gpio--yk测试
    sama5d3 环境检测 gpio--yx测试
    ad7888 linux driver
  • 原文地址:https://www.cnblogs.com/zjm1999/p/10212796.html
Copyright © 2011-2022 走看看