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里面加样式，比如定位咯！
第十五篇 JS 移入移出事件 模拟一个二级菜单
原文地址：http://www.cnblogs.com/longfeng995/p/7590418.html