CSS3實現滑鼠移至上方顯示擴充內容

本文給大家分享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檔案即可。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！