CSS3實(shí)現(xiàn)鼠標(biāo)懸停顯示擴(kuò)展內(nèi)容

我們?cè)谧鰧?dǎo)航標(biāo)簽的時(shí)候,有時(shí)會(huì)出現(xiàn)空間過(guò)于擁擠需要隱藏部分內(nèi)容的情況,所以在這里我自己寫(xiě)了一個(gè)鼠標(biāo)懸停顯示擴(kuò)展內(nèi)容的效果,如下圖所示。
總的來(lái)說(shuō)效果還是比較好實(shí)現(xiàn),但是比較頭疼的是三角部分使用了偽元素::after,而對(duì)父元素設(shè)置 over-flow:hidden 時(shí)也會(huì)把偽元素給隱藏掉。最后想的辦法是把文字和圖標(biāo)用一個(gè) <span> 包裹住然后對(duì)其設(shè)置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> 統(tǒng)計(jì)界面</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: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擴(kuò)展效果 ******************/
- @-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擴(kuò)展效果 ******************/
- @-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;
- }
- }
其中圖標(biāo)使用的是 font-awesome 提供的API,使用時(shí)引入它的css文件即可。
以上所述是小編給大家介紹的CSS3實(shí)現(xiàn)鼠標(biāo)懸停顯示擴(kuò)展內(nèi)容 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
純CSS3實(shí)現(xiàn)圖片無(wú)間斷輪播效果
圖片輪播效果在各大網(wǎng)站都能用到,本文給大家分享通過(guò)純css3制作輪播效果圖的思路,感興趣的朋友一起看看吧2016-08-25CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法
下面小編就為大家?guī)?lái)一篇CSS3利用text-shadow屬性實(shí)現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-25- 本特效是一款使用純CSS3制作的單頁(yè)切換導(dǎo)航菜單界面設(shè)計(jì)效果的代碼。導(dǎo)航按鈕時(shí),相應(yīng)的頁(yè)面會(huì)從屏幕右側(cè)滑動(dòng)出來(lái)2016-08-24
- 本特效是一款使用純CSS3制作的超酷文章卡片UI設(shè)計(jì)效果的代碼。帶有陰影效果,描述信息會(huì)以滑動(dòng)動(dòng)畫(huà)的方式出現(xiàn)2016-08-23
利用CSS3實(shí)現(xiàn)開(kāi)門效果實(shí)例源碼
這篇文章介紹的是利用CSS3實(shí)現(xiàn)當(dāng)鼠標(biāo)移動(dòng)到門上會(huì)自動(dòng)開(kāi)門,當(dāng)鼠標(biāo)移開(kāi)后會(huì)自動(dòng)關(guān)閉門的效果,實(shí)現(xiàn)以后效果很贊,有需要的可以參考借鑒。2016-08-22- 本特效是一款使用CSS3制作的垂直列表面板設(shè)計(jì)效果的代碼??捎糜谥谱魑恼铝斜?,排行列表等,歡迎下載使用2016-08-22
CSS3繪制六邊形的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇CSS3繪制六邊形的簡(jiǎn)單實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-25