CSS3实现鼠标悬停显示扩展内容


Posted in HTML / CSS onAugust 24, 2016

我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示。
 

CSS3实现鼠标悬停显示扩展内容

总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪元素::after,而对父元素设置 over-flow:hidden 时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性。

HTML代码:

CSS Code复制内容到剪贴板
  1.     <div id="nav">   
  2.        <a id="nav-main"><span><i class="icon-home"></i> 主界面</span></a>   
  3.          <a id="nav-sum"><span><i class="icon-laptop"></i> 统计界面</span></a>   
  4.    </div>    
  5.   
  6. CSS代码:   
  7.   
  8. /*******************************************************************************/  
  9. /*********************************** nav **************************************/  
  10. /*******************************************************************************/  
  11. #nav{   
  12.     box-sizing:border-box;   
  13.     width:200px;   
  14.     height:100%;   
  15.     position:fixed;   
  16.     padding-top:80px;   
  17. }   
  18. #nav a{   
  19.     display:block;   
  20.     width:30px;   
  21.     height:52px;   
  22.     position:relative;   
  23.     margin-top:50px;   
  24. }   
  25. #nav a span{   
  26.     display:inline-block;   
  27.     width:46px;   
  28.     height:50px;   
  29.     font-size:1em;   
  30.     font-weight:600;   
  31.     color:rgba(255,255,255,0.9);   
  32.     text-indent:3px;   
  33.     line-height:52px;   
  34.     cursor:pointer;   
  35.     overflow:hidden;   
  36. }   
  37. #nav a span i{   
  38.     font-size:1.3em;   
  39. }   
  40. #nav a::after{   
  41.     content:'';   
  42.     display:block;   
  43.     width:0;   
  44.     height:0;   
  45.     position:absolute;   
  46.     rightright:-32px;   
  47.     bottombottom:0;   
  48.     border-top:26px solid transparent;   
  49.     border-right:16px solid transparent;   
  50.     border-bottom:26px solid transparent;   
  51. }   
  52. #nav-main{   
  53.     background-color:rgb(211,83,80);   
  54. }   
  55. #nav-sum{   
  56.     background-color:rgb(0,158,163);   
  57. }   
  58. #nav-main::after{   
  59.     border-left:16px solid rgb(211,83,80);   
  60. }   
  61. #nav-sum::after{   
  62.     border-left:16px solid rgb(0,158,163);   
  63. }   
  64. #nav a:hover{   
  65.     -webkit-animation:extend-a 0.5s;   
  66.     -moz-animation:extend-a 0.5s;   
  67.     animation:extend-a 0.5s;   
  68.     width:100px;   
  69. }   
  70. #nav a span:hover{   
  71.     -webkit-animation:extend-span 0.5s;   
  72.     -moz-animation:extend-span 0.5s;   
  73.     animation:extend-span 0.5s;   
  74.     width:116px;   
  75. }   
  76. /******************* a扩展效果 ******************/  
  77. @-webkit-keyframes extend-a{   
  78.     0% {   
  79.         width:30px;   
  80.     }   
  81.     100% {   
  82.         width:100px;   
  83.     }   
  84. }   
  85. @-moz-keyframes extend-a{   
  86.     0% {   
  87.         width:30px;   
  88.     }   
  89.     100% {   
  90.         width:100px;   
  91.     }   
  92. }   
  93. @keyframes extend-a{   
  94.     0% {   
  95.         width:30px;   
  96.     }   
  97.     100% {   
  98.         width:100px;   
  99.     }   
  100. }   
  101. /******************* span扩展效果 ******************/  
  102. @-webkit-keyframes extend-span{   
  103.     0% {   
  104.         width:46px;   
  105.     }   
  106.     100% {   
  107.         width:116px;   
  108.     }   
  109. }   
  110. @-moz-keyframes extend-span{   
  111.     0% {   
  112.         width:46px;   
  113.     }   
  114.     100% {   
  115.         width:116px;   
  116.     }   
  117. }   
  118. @keyframes extend-span{   
  119.     0% {   
  120.         width:46px;   
  121.     }   
  122.     100% {   
  123.         width:116px;   
  124.     }   
  125. }  

其中图标使用的是 font-awesome 提供的API,使用时引入它的css文件即可。

以上所述是小编给大家介绍的CSS3实现鼠标悬停显示扩展内容 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
html5 标签
Jul 16 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 #HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 #HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 #HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 #HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 #HTML / CSS
css3的过滤效果简单实例
Aug 03 #HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 #HTML / CSS
You might like
JpGraph php柱状图使用介绍
2011/08/23 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Django中create和save方法的不同
2019/08/13 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
护理人员的自我评价分享
2014/03/15 职场文书
食品安全处置方案
2014/06/14 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技