CSS3实现鼠标悬停扩展效果

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

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

HTML代码：

     <div 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>
     </div>

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:;
     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:;
     height:;
     position:absolute;
     right:-32px;
     bottom:;
     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文件即可。