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

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

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

HTML代码：

 <p id="nav"> 
 <a id="nav-main"><span><i class="icon-home"></i> 主界面</span></a> 
 <a id="nav-sum"><span><i class="icon-laptop"></i> 统计界面</span></a> 
 </p> 
CSS代码： 
/*******************************************************************************/
/*********************************** nav **************************************/
/*******************************************************************************/
#nav{ 
 box-sizing:border-box; 
 width:200px; 
 height:100%; 
 position:fixed; 
 padding-top:80px; 
} 
#nav a{ 
 display:block; 
 width:30px; 
 height:52px; 
 position:relative; 
 margin-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-indent: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; 
 rightright:-32px; 
 bottombottom: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-keyframes 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文件即可。