您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關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: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文件即可。
感謝各位的閱讀!關于“CSS3如何實現鼠標懸停顯示擴展內容 ”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。