CSS实现鼠标悬浮无限向下级展示的实例代码
发布时间:2017-09-07 15:17:15 作者:佚名 我要评论
本文通过实例代码给大家介绍了CSS实现鼠标悬浮无限向下级展示的实例代码,需要的朋友参考下吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
废话不多说了,直接大家贴代码了,具体代码如下所示;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | *{ margin : 0 ; padding : 0 ; } ul,li{ list-style : none ; } .ui-slide-box{ width : 300px ; } .ui-slide-item{ width : 100% ; position : relative ; } .ui-slide-item-text{ display : block ; background-color : #000000 ; color : white ; border-bottom : 1px solid yellow; height : 40px ; line-height : 40px ; } .ui-slide-item .ui-slide-box{ display : none ; position : absolute ; left : 300px ; top : 0 ; } .ui-slide-item:hover > .ui-slide-box{ display : block ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >aaaaaaaaaaaaa</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >aaaaaaaaaaaa</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >dddddddd </span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >sssssssssssss</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >eeeeeeeeeeee</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >ccccccccccccc</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >aaaaaaaaaaaaa</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >aaaaaaaaaaaa</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >dddddddd </span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >sssssssssssss</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >eeeeeeeeeeee</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >ccccccccccccc</span> </li> </ul> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >bbbbbbbbbb</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >sfsdfsdfsd </span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >cvwdfsd</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >ewewewe</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >xxcxc</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >bbbbbbbbbb</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >sfsdfsdfsd </span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >cvwdfsd</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >ewewewe</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >xxcxc</span> </li> </ul> </li> </ul> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >bbbbbbbbbbb</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >aaaaaaaaaaaa</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >dddddddd </span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >sssssssssssss</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >eeeeeeeeeeee</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >ccccccccccccc</span> </li> </ul> </li> </ul> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >cccccccccccccccccc</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >rrrrrrrrrrrrrrrrrrrrrrrrrr</span> <ul class= "ui-slide-box" > <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >dddddddd </span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >sssssssssssss</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >eeeeeeeeeeee</span> </li> <li class= "ui-slide-item" > <span class= "ui-slide-item-text" >ccccccccccccc</span> </li> </ul> </li> </ul> </li> </ul> |
总结
以上所述是小编给大家介绍的CSS实现鼠标悬浮无限向下级展示的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
使用CSS content的attr实现鼠标悬浮提示(tooltip)效果
这篇文章主要介绍了使用CSS content的attr实现鼠标悬浮提示(tooltip)效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-10-10- 昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮。下面通过本文给大家分享CSS鼠标悬浮DIV后显示DIV外的按钮解决方法,感兴趣的朋友一起看看2017-08-26
- 使用了CSS3的animation、transform、transition制作了一个动画导航效果,其中利用了Ligature Icon UI制作了导航中的ICON图标,需要了解的朋友可以参考下2012-12-27
- 这篇文章主要介绍了css实现缕空遮罩层的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2020-06-03
- 这篇文章主要介绍了css3遮罩层镂空效果的多种实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-05-11
- 这篇文章主要介绍了CSS实现带遮罩层可关闭的弹窗效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-09
- 这篇文章主要介绍了CSS实现鼠标移至图片上显示遮罩层效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧2019-11-20
- 这篇文章主要介绍了CSS 鼠标悬浮在图片上添加遮罩层效果的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-17
最新评论