仿京东左侧菜单 hover效果-简易demo

简单描述： 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡（或事件委托）

1   .cont{display:inline-block;width:200px;height:200px;border:1px solid red;position:absolute;left:150px;top:2px;display:none;}

 1 <div style="border:1px solid green;margin:30px auto;width:150px;" id="menu">
 2             
 3             <div class="item" id="div1" style="position:relative;">
 4                 <span style="display:inline-block;background: #abcdef;width:150px;height:50px;cursor:pointer;">123span>
 5                 <span id="span1"  class="cont">
 6                      hello1111111
 7                      hello1111111
 8                      hello1111111
 9                      hello1111111
10                      hello1111111
11                 span>
12             div>
13             
14             <div id="div2" class="item" style="position:relative;">
15                 <span style="display:inline-block;background: red;width:150px;height:50px;cursor:pointer;">123span>
16                 <span class="cont">hello222222span>
17             div>
18                 
19             <div id="div3" class="item" style="position:relative;">
20                 <span style="display:inline-block;background: green;width:150px;height:50px;cursor:pointer;">123span>
21                 <span class="cont">hello333333span>
22             div>
23             
24          div>

 1  window.onload = function(){
 2              var oSpan1 = document.getElementById("span1");
 3              var oMenu = document.getElementById("menu");
 4              var oSMenu = oMenu.childNodes;
 5                   
 6              for(var n=oSMenu.length-1; n>=0; n--){
 7                   if(oSMenu[n].className == "item"){
 8                       oSMenu[n].onmouseover = function(evt){
 9                             var target = oTargetByClass._get_target_child(this.childNodes, "cont");
10                             target.style.display = "block";
11                       }
12                       
13                        oSMenu[n].onmouseout = function(evt){                    
14                             var target = oTargetByClass._get_target_child(this.childNodes, "cont");
15                             target.style.display = "none";
16                      }         
17                   }                 
18              } 
19                         
20              var oTargetByClass = {
21              
22                  _get_target_child: function(childNodes, child_class){
23                     for(var i = childNodes.length-1; i>=0; i--){
24                         if(childNodes[i].className == child_class){
25                              return childNodes[i];
26                         }
27                     } 
28                  }
29              }
30          }

 

转载于:https://www.cnblogs.com/yiliweichinasoft/p/4074497.html