使用JavaScript实现交互式下拉菜单-CSDN博客

本文链接：https://blog.csdn.net/csdn_chenli/article/details/52797113

这篇博客详细介绍了如何利用JavaScript实现下拉菜单的交互效果。主要涉及鼠标移入和移出事件的处理，包括当鼠标进入时显示下拉菜单，离开时隐藏菜单。通过封装hover、显示和隐藏事件，结合基础库base.js来完成这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js实现下拉菜单

效果图

1.主要是鼠标移入和移出事件

2.鼠标移入显示下拉菜单

3.鼠标移除隐藏菜单

*封装hover事件

*封装显示事件

*封装隐藏事件

base.js

//伪类事件hover 鼠标移入、移除事件
Base.prototype.hover=function(over,out){//传递移入、移除参数
   for(var i=0;i<this.elements.length;i++){
       this.elements[i].οnmοuseοver=over;//鼠标移入
       this.elements[i].οnmοuseοut=out;//鼠标移除
   }
   return this;
};
//添加显示show事件
Base.prototype.show=function(){
   for(var i=0;i<this.elements.length;i++){
       this.elements[i].style.display='block';
   }
   return this;
};
//添加隐藏事hide件
Base.prototype.hide=function(){
   for(var i=0;i<this.elements.length;i++){
       this.elements[i].style.display='none';
   }
   return this;
};

调用base.js基础库

window.οnlοad=function(){
       //hover（）实现两个函数function(){} 鼠标移入事件鼠标移除事件
       var info=$().getClass('centerInfo');
       info.hover(function(){
           info.css('background','url(images/s2.png) no-repeat 70px center');
           $().getTagName('ul').show();
       },function(){
           info.css('background','url(images/s1.png) no-repeat 70px center');
           $().getTagName('ul').hide();
       });
};