CSS3实现鼠标悬停扩展效果

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

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

HTML代码：

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>

CSS代码：

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

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