代码示例:
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 </style> 40 </head> 41 <body> 42 <div id="box"> 43 <span id="span">设置</span> 44 <ul id="ul"> 45 <li>搜索设置</li> 46 <li>高级设置</li> 47 <li>关闭预测</li> 48 <li>搜索历史</li> 49 </ul> 50 </div> 51 </body> 52 </html> 53 <!-- 54 HTML是结构,css是样式,javascrip是行为 55 使用JavaScript完成一个简单的显示隐藏效果 56 下面代码的解析:从文档中获得span元素的内容,当鼠标经过或者离开span也就是设置这一元素区域时,触发函数,函数功能是修改display是否展示 57 --> 58 <script type="text/javascript"> 59 document.getElementById('span').onmouseover= function(){ 60 document.getElementById('ul').style.display='block'; 61 }; 62 document.getElementById('span').onmouseout=function(){ 63 document.getElementById('ul').style.display='none'; 64 }; 65 </script>
初始效果:
鼠标经过元素区:
鼠标离开还原