| css实例（一）鼠标hover下拉菜单 | 您所在的位置：网站首页 › vue鼠标悬浮菜单 › css实例（一）鼠标hover下拉菜单 |
css实例（一）鼠标hover下拉菜单
|
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情 Css我们来实现第一个实例，鼠标hover显示下拉菜单，我们最后要实现的效果如下图所示：
首先放一下所有这次试用的所有html代码： Important Promotions Social
然后，我们从最外层开始解释其中的css样式（class类） 1 ：最外层div div-top /*最外层div*/ .div-top{ margin-left: 100px; /*相对定位，这个作用是让菜单显示位置相对于最外层的div的位置显示*/ position: relative; }2 ：图片div box_show /*图片div*/ .box_show{ width:100px; height:100px; }这个div的作用其实不在于设置宽高，设置宽高，我可以直接给img标签变成块级元素，给其设置宽高可能来的更实在一点，起码我是这么认为的。 他的作用更多的是用来控制同级兄弟div的样式。
3 ：菜单div nav_stacked /*菜单div*/ .nav_stacked{ /*默认是不显示的*/ display:none; /*绝对定位显示，相对于最外层的绝对定位显示*/ position: absolute; /*显示位置*/ top:20px; left:-20px; } /*鼠标滑过，显示（当然这是指他显示出来之后的事情）*/ .nav_stacked:hover { display:block; }4 ：图片div的鼠标滑过（hover）事件 box_show:hover /*增加同级div的class的样式*/ .box_show:hover+.nav_stacked{ display:block; }这个写法 比较有意思，着重了解一下。 到这一步为止，我们就实现了鼠标hover图片div，显示菜单的功能。如下图所示： 但是现在这个菜单的样式不太好看，我们再继续美化一下菜单的样式
5 ：菜单ul ul_back /*菜单ul的基本样式*/ .ul_back{ /*清除默认样式*/ list-style: none; /*设置宽度*/ width:100px; /*背景色*/ background-color: #FFF; /*边框*/ border:1px solid #E4E4E4; /*去掉默认左边的空白*/ padding-inline-start:0px; }设置ul最基础的样式
6 ：li部分的样式 li_style li_style_border /*li标签边框样式，不是没有li都有边框，所以，将其单独拿出*/ .li_style_border{ border-bottom:1px solid #E4E4E4; } /*li标签基本样式*/ .li_style{ text-align: center; padding: 5px; color:#333333; } /*鼠标滑过li的样式*/ .li_style:hover{ background-color: #EBF3FE; color:#0066FF; cursor: pointer; }这里大概说明一下，没个li的样式都不是完全一样的，所以，我将公共样式部分统一写到li_style中，将边框的样式拿出来单写，那个li需要边框，追加上就可以了。
7 ：小尖尖角样式：xiaojian 如下图所示： 红框标注位置，有一个小尖尖角，这个使用样式是这样实现的。 /*小尖尖角样式*/ .xiaojian{ background-color:#FFF; width:10px; height:10px; border:1px solid #E4E4E4; /* 设置相对定位 */ position:relative; /*显示位置*/ left:43px; top:-7px; /*旋转小方块45度*/ transform:rotate(45deg); /* 去除右、下边框 */ border-right:0px; border-bottom:0px; }
最终，上边的代码写在一起，就形成了我们最开始想要完成的效果图。 测试使用全部源码： Document body{ background-color: beige; } /*去除A标签默认样式*/ a{ text-decoration: none; } /*最外层div*/ .div-top{ margin-left: 100px; /*对定位，这个作用是让菜单显示位置相对于最外层的div的位置显示*/ position: relative; } /*图片div*/ .box_show{ width:100px; height:100px; } /*增加同级div的class的样式*/ .box_show:hover+.nav_stacked{ display:block; } /*菜单div*/ .nav_stacked{ /*默认是不显示的*/ display:none; /*绝对定位显示，相对于最外层的绝对定位显示*/ position: absolute; /*显示位置*/ top:20px; left:-20px; } /*菜单ul的基本样式*/ .ul_back{ /*清除默认样式*/ list-style: none; /*设置宽度*/ width:100px; /*背景色*/ background-color: #FFF; /*边框*/ border:1px solid #E4E4E4; /*去掉默认左边的空白*/ padding-inline-start:0px; } /*鼠标滑过，显示*/ .nav_stacked:hover { display:block; } /*li标签边框样式，不是没有li都有边框，所以，将其单独拿出*/ .li_style_border{ border-bottom:1px solid #E4E4E4; } /*li标签基本样式*/ .li_style{ text-align: center; padding: 5px; color:#333333; } /*鼠标滑过li的样式*/ .li_style:hover{ background-color: #EBF3FE; color:#0066FF; cursor: pointer; } /*小尖尖角样式*/ .xiaojian{ background-color:#FFF; width:10px; height:10px; border:1px solid #E4E4E4; /* 设置相对定位 */ position:relative; /*显示位置*/ left:43px; top:-7px; /*旋转小方块45度*/ transform:rotate(45deg); /* 去除右、下边框 */ border-right:0px; border-bottom:0px; } Important Promotions Social文末有实例，可下载。 有好的建议，请在下方输入你的评论。 原文链接：点击这里，走你 欢迎访问个人博客：guanchao.site 欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的” |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |