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

   .cont{display:inline-block;width:200px;height:200px;border:1px solid red;position:absolute;left:150px;top:2px;display:none;}
 <div style="border:1px solid green;margin:30px auto;width:150px;" id="menu">

             <div class="item" id="div1" style="position:relative;">
<span style="display:inline-block;background: #abcdef;width:150px;height:50px;cursor:pointer;">123</span>
<span id="span1" class="cont">
hello1111111
hello1111111
hello1111111
hello1111111
hello1111111
</span>
</div> <div id="div2" class="item" style="position:relative;">
<span style="display:inline-block;background: red;width:150px;height:50px;cursor:pointer;">123</span>
<span class="cont">hello222222</span>
</div> <div id="div3" class="item" style="position:relative;">
<span style="display:inline-block;background: green;width:150px;height:50px;cursor:pointer;">123</span>
<span class="cont">hello333333</span>
</div> </div>
  window.onload = function(){
var oSpan1 = document.getElementById("span1");
var oMenu = document.getElementById("menu");
var oSMenu = oMenu.childNodes; for(var n=oSMenu.length-1; n>=0; n--){
if(oSMenu[n].className == "item"){
oSMenu[n].onmouseover = function(evt){
var target = oTargetByClass._get_target_child(this.childNodes, "cont");
target.style.display = "block";
} oSMenu[n].onmouseout = function(evt){
var target = oTargetByClass._get_target_child(this.childNodes, "cont");
target.style.display = "none";
}
}
} var oTargetByClass = { _get_target_child: function(childNodes, child_class){
for(var i = childNodes.length-1; i>=0; i--){
if(childNodes[i].className == child_class){
return childNodes[i];
}
}
}
}
}

最新文章

  1. WCF备忘录一:服务端实例的生命周期
  2. C#互斥体——Mutex
  3. apache与nginx的虚拟域名配置
  4. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)
  5. [HOOLOO] zizaco/entrust 5.2.x-dev Class name must be a valid object or a string
  6. cmd 打开gitshell
  7. SQL视图与触发器
  8. openstack 上床镜像, 创建网络, 创建虚拟机 命令
  9. 利用JS提交表单的几种方法和验证
  10. SqlDependency缓存数据库表小案例
  11. EXCEL 2010学习笔记—— 动态图表
  12. htmlentities() 函数
  13. COJ 0026 汉诺塔问题
  14. CPU使用率和Load Average的关系
  15. oracle数据库单个数据文件的大小限制
  16. Tyvj-TOM的无穷序列
  17. try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后?
  18. 老男孩Python全栈学习 S9 日常作业 006
  19. vue 本地存储数据 sessionStorage
  20. CF1117E Decypher the String

热门文章

  1. OBjective-C:在可变数组NSMutableArray中添加相同对象后,进行自定义的排序方式输出
  2. C/C++中内联(inline)函数的优点和缺点
  3. 血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息
  4. 笔记本wifi热点设置好后,手机连上但不能上网问题
  5. json数据的用法
  6. 设置网站expires和max-age属性
  7. 遭遇java.lang.NoClassDefFoundError: org/apache/tomcat/PeriodicEventListener
  8. Opera Unit如何自定义My Opera的网页界面
  9. libcurl 接口调用方式
  10. Android IO存储总结