JS 移入移出事件 模拟一个二级菜单
老师演示一个特别简单二级菜单，同学们除了学习JS，还要注意它的元素和CSS样式。
这节课介绍的是JS鼠标移入、移出事件：onmouseover是移入事件，onmouseout是移出事件。当然还有其他的事件效果，这里就先不说明了。
先直接上一段代码：
<!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>
二级ul显示之后，会影响之后的元素比如这里的p元素，那这样做的话，会导致页面乱掉的，用户体验不够友好，所以我们可以在css里面加样式，比如定位咯！