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

最新推荐文章于 2021-06-01 13:28:54 发布

weixin_30808575

最新推荐文章于 2021-06-01 13:28:54 发布

阅读量2.4k

点赞数 1

文章标签： javascript 人工智能前端 ViewUI

原文链接：http://www.cnblogs.com/yiliweichinasoft/p/4074497.html

版权

该博客介绍了一个简单的前端示例，演示如何利用CSS的绝对定位和JavaScript的事件冒泡或事件委托技术，实现类似京东左侧菜单的hover效果。

摘要由CSDN通过智能技术生成

简单描述：用到的知识点 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;">123