仿京东左侧菜单 hover效果-简易demo
2024-10-15 21:12:23
简单描述: 用到的知识点 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];
}
}
}
}
}
最新文章
- WCF备忘录一:服务端实例的生命周期
- C#互斥体——Mutex
- apache与nginx的虚拟域名配置
- 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)
- [HOOLOO] zizaco/entrust 5.2.x-dev Class name must be a valid object or a string
- cmd 打开gitshell
- SQL视图与触发器
- openstack 上床镜像, 创建网络, 创建虚拟机 命令
- 利用JS提交表单的几种方法和验证
- SqlDependency缓存数据库表小案例
- EXCEL 2010学习笔记—— 动态图表
- htmlentities() 函数
- COJ 0026 汉诺塔问题
- CPU使用率和Load Average的关系
- oracle数据库单个数据文件的大小限制
- Tyvj-TOM的无穷序列
- try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后?
- 老男孩Python全栈学习 S9 日常作业 006
- vue 本地存储数据 sessionStorage
- CF1117E Decypher the String
热门文章
- OBjective-C:在可变数组NSMutableArray中添加相同对象后,进行自定义的排序方式输出
- C/C++中内联(inline)函数的优点和缺点
- 血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息
- 笔记本wifi热点设置好后,手机连上但不能上网问题
- json数据的用法
- 设置网站expires和max-age属性
- 遭遇java.lang.NoClassDefFoundError: org/apache/tomcat/PeriodicEventListener
- Opera Unit如何自定义My Opera的网页界面
- libcurl 接口调用方式
- Android IO存储总结