<!--程序2-11-menu.html--> <html> <head> <title> 下拉菜单实例</title> <script language = "javaScript"> //鼠标移动到菜单选项时显示对应的div function show(menu) {document.getElementById(menu).style.visibility = "visible";} //当鼠标移出时隐藏所有div function hide() {document.getElementById("menu1").style.visibility = "hidden"; document.getElementById("menu2").style.visibility = "hidden"; document.getElementById("menu3").style.visibility = "hidden"; } </script> </head> <body> <table> <tr bgcolor = "#9999FF" align = "center"> <td width = "120" onMouseMove = "show('menu1')" onMouseOut = "hide()">系列课程</td> <td width = "120" onMouseMove = "show('menu2')" onMouseOut = "hide()">教学课件</td> <td width = "120" onMouseMove = "show('menu3')" onMouseOut = "hide()">课程大纲</td> </tr> </table> <div id = "menu1" onMouseMove = "show('menu1')" onMouseOut = "hide()" style = "background:#9999ff;position:absolute;left:12;top=38;width=120; visibility : hidden"> <span>c++</span><br> <span>java</span><br> <span>c#</span><br> </div> <div id = "menu2" onMouseMove = "show('menu2')" onMouseOut = "hide()" style = "background:#9999ff;position:absolute;left:137;top=38;width=120; visibility : hidden"> <span>c++课件</span><br> <span>java课件</span><br> <span>c#课件</span><br> </div> <div id = "menu3" onMouseMove = "show('menu3')" onMouseOut = "hide()" style = "background:#9999ff;position:absolute;left:260;top=38;width=120; visibility : hidden"> <span>c++大纲</span><br> <span>java大纲</span><br> <span>c#大纲</span><br> </div> </body> </html>
onMouseMove在鼠标移动时就会响应onMouseOver 在鼠标进入响应区域时响应