我们在做导航标签的时候，有时会出现空间过于拥挤需要隐藏部分内容的情况，所以在这里我自己写了一个鼠标悬停显示扩展内容的效果，如下图所示。
&nbs p;
总的来说效果还是比较好实现，但是比较头疼的是三角部分使用了伪元素: :after ，而对父元素设置 over-flow:hidden 时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 <span> 包裹住然后对其设置over-flow属性。
HT ML 代码：
CSS Code 复制内容到剪贴板
<div id= "nav" > <a id= "nav-m ai n" ><span><i class= "icon-home" ></i> 主界面</span></a> <a id= "nav -s um" ><span><i class= "icon-laptop" ></i> 统计界面</span></a> </div> CSS代码： /*******************************************************************************/ /*********************************** nav **************************************/ /*******************************************************************************/ # nav { box-sizing: border -box; width : 200px ; h ei ght :100%; pos IT ion : fixed ; padding -t op : 80px ; } #nav a{ dis play : block ; width : 30px ; height : 52px ; position : relative ; m arg in-top : 50px ; } #nav a span{ display : inline - block ; width : 46px ; height : 50px ; font-size :1em; font-weight :600; color :rgba(255,255,255,0.9); text -i ndent : 3px ; line-height : 52px ; cursor : pointer ; overflow : hidden ; } #nav a span i{ font-size :1.3em; } #nav a :: after{ content : '' ; display : block ; width :0; height :0; position : absolute ; right right :- 32px ; bottom bottom :0; border-top : 26px solid transparent ; border-right : 16px solid transparent ; border-bottom : 26px solid transparent ; } #nav -main{ background-color : rgb (211,83,80); } #nav -sum{ background-color : rgb (0,158,163); } #nav -main::after{ border-left : 16px solid rgb (211,83,80); } #nav -sum::after{ border-left : 16px solid rgb (0,158,163); } #nav a:hover{ - webkit -animation:extend-a 0.5s; -moz-animation:extend-a 0.5s; animation:extend-a 0.5s; width : 100px ; } #nav a span:hover{ -webkit-animation:extend-span 0.5s; -moz-animation:extend-span 0.5s; animation:extend-span 0.5s; width : 116px ; } /******************* a扩展效果 ******************/ @-webkit-keyfr am es extend-a{ 0% { width : 30px ; } 100% { width : 100px ; } } @-moz-keyframes extend-a{ 0% { width : 30px ; } 100% { width : 100px ; } } @keyframes extend-a{ 0% { width : 30px ; } 100% { width : 100px ; } } /******************* span扩展效果 ******************/ @-webkit-keyframes extend-span{ 0% { width : 46px ; } 100% { width : 116px ; } } @-moz-keyframes extend-span{ 0% { width : 46px ; } 100% { width : 116px ; } } @keyframes extend-span{ 0% { width : 46px ; } 100% { width : 116px ; } }
其中图标使用的是 font-awesome 提供的API，使用时引入它的css文件即可。
以上所述是小编给大家介绍的CSS3实现鼠标悬停显示扩展内容 ， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
总结
以上是 为你收集整理的 CSS3实现鼠标悬停显示扩展内容 全部内容，希望文章能够帮你解决 CSS3实现鼠标悬停显示扩展内容 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3实现鼠标悬停显示扩展内容的详细内容...