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>
初始效果:
鼠标经过元素区:
鼠标离开还原
