DIV CSS 佈局教程網

我們在做導航標簽的時候，有時會出現空間過於擁擠需要隱藏部分內容的情況，所以在這裡我自己寫了一個鼠標懸停顯示擴展內容的效果，如下圖所示。
 

總的來說效果還是比較好實現，但是比較頭疼的是三角部分使用了偽元素::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>    
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實現鼠標懸停顯示擴展內容 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！