css导航栏鼠标hover的时候就出现下拉菜单
2017-10-12 19:55
1566 查看
代码如下:
dispaly和visibility的区别
dispaly----bolck属性可以把行级元素变成块级元素,dispaiy隐藏的元素不会占位。
visibility----当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .two{ 8 background-color: aqua; 9 width: 500px; 10 height: 200px; 11 } 12 /*默认的threediv是隐藏的*/ 13 .three{ 14 background-color: black; 15 width: 100px; 16 height: 300px; 17 float: right; 18 visibility:hidden; 19 } 20 /*鼠标移动到twodiv就会改变threediv的visibility*/ 21 .two:hover>.three{ 22 visibility:visible; 23 } 24 </style> 25 </head> 26 <body> 27 <!---鼠标移到到的div----> 28 <div class="two"> 29 <!---默认隐藏的div----> 30 <div class="three"> 31 </div> 32 </div> 33 </body> 34 </html>
dispaly和visibility的区别
dispaly----bolck属性可以把行级元素变成块级元素,dispaiy隐藏的元素不会占位。
visibility----当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置
相关文章推荐
- 导航栏Tab内容 hover延迟出现(CSS)
- 用div+css做下拉菜单,当鼠标移向2级菜单时,为什么1级菜单的a:hover背景色就不管用了?
- 经典的 div + css 鼠标 hover 下拉菜单
- 记一个鼠标略过时候的css动画
- 精美纯Css鼠标经过下拉菜单
- 鼠标点击出现下拉菜单,点其他地方,缩回去。
- css基础 鼠标停放在一处 出现提示文字 title属性
- JQUERY HOVER鼠标悬停导航菜单滑动展开弹性下拉菜单
- css实现鼠标移入table时出现滚动条且table内容不移位
- java中怎样实现当鼠标移动到按钮的时候有提示文字出现
- css实现鼠标悬停,光标出现小手
- 在用鼠标单击DBGrid标题单元格的时候总是在这个列的左侧出现一条黑色竖线,鼠标轻开后竖线消失,怎样在单击时不出现这条竖线?
- 20行html代码加40行css代码实现照片墙页面(鼠标hover实现旋转缩放)
- Bootstrap导航栏下拉菜单鼠标滑过展开
- Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开
- 表格的hover效果,IE6下用JS解决。--- 当鼠标移动到表格行时出现行背景颜色。
- css3实现图片遮罩效果鼠标hover以后出现文字
- css简单实现热点链接当鼠标悬停时出现白色的框
- css隐藏下拉菜单的设置,当鼠标放上去时,自动显示下拉菜单
- CSS+JS感应鼠标展开的的二级下拉菜单