JavaScript鼠标悬浮出现下拉菜单效果

本章节分享一段代码实例，它实现了鼠标悬浮出现下拉菜单效果。

代码实例如下:

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.function menuFix(){}，此方法是onload事件处理函数。

（2）.var sfEls=document.getElementById("menu").getElementsByTagName("li")，获取li元素集合。

（3）.for (var index=0;index<sfEls.length;index++){}，遍历每一个li元素集合。

（4）.sfEls[index].onmouseover=function(){  this.className+=(this.className.length > 0 ? " " : "") + "sfhover";

}，为当前li元素注册onmouseover时间处理函数。如果当前li元素具有class属性，那么后面加个空格再连接上"sfhover"，如果没有class属性值，那么就链接一个空字符串，再连接上"sfhover"。其实就是这种形式class="a"，如果再添加class类b的话，只能在a后面加一个空格，class="a b"。又因为样式表中有如下代码:

#menu ul li.sfhover ul{ 

  display:block;

},所以二级导航菜单会显示。

（5）.sfEls[index].onmouseout=function(){

  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");

}，当鼠标离开的时候，就会把演示类中的sfhover替换为空，当然二级菜单就会隐藏。

二.相关阅读:

（1）.getElementsByTagName()参阅document.getElementsByTagName()一章节。

（2）.onmouseover事件参阅javascript mouseover事件一章节。

（3）.className参阅js className一章节。

（4）.onmouseout事件参阅javascript mouseout事件一章节。

（5）.replace()参阅正则表达式replace()一章节。