标签：char bsp isp 点击 说明 round 关键字 修改 rip
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>二级菜单，鼠标移出和移入事件</title> <style> ul li{ /*取消 li前面的黑点*/ list-style:none; } #er{ /*让二级ul移动到 一级ul下面去*/ margin:5px 0 0 -40px; /*因为做二级菜单效果，它先是隐藏的*/ display: none; } </style> </head> <body> <div onclick="dianji()">点击我</div> <ul onmouseover="yiru()" onmouseout="yichu()"> <li>我的</li> <li> <ul id="er"> <li>个人资料</li> <li>密码安全</li> </ul> </li> </ul> <br/><br/><br/><br/> <p>那么onclick是点击事件，我们还有鼠标移入事件和移出事件</p> <p>onmouseout是移出事件，onmouseover是移入事件</p> <p>移入事件，鼠标移动到某个元素上，这个元素触发onmouseover事件</p> <p>我们在第一个ul里给出移入事件和移出事件，再到JS里去写函数</p> <p>注意：<br/>ul是块级元素，是整行的，同学们可以自己加个背景颜色看效果<br/> 显示出来的二级ul也是块级元素，它会占用自己的位置而影响之后的元素</p> <script> function dianji(){ //这里简单测试一下 onclick点击事件 alert(‘嗨，同学们好！‘); } //function关键字 定义 函数 yiru() function yiru(){ var erji = document.getElementById("er"); //找到二级ul的ID，然后修改它的样式，就可以显示出来了 erji.style.display="block"; } //那么移出事件是同一个意思，就是反过来即可 function yichu(){ var erji = document.getElementById("er"); //找到二级ul的ID，然后修改它的样式，就可以显示出来了 erji.style.display="none"; } </script> </body> </html>
标签：char bsp isp 点击 说明 round 关键字 修改 rip
原文地址：http://www.cnblogs.com/longfeng995/p/7590418.html
