CSS3實現鼠標懸停顯示擴展內容
發(fā)布時間:2016-08-24 16:27:55 作者:佚名
我要評論

本文給大家分享css3代碼實現鼠標懸停顯示要擴展的內容,在空間過于擁擠時需要隱藏部分內容使用此功能比較好,下面小編給帶來了具體實現代碼,一起看看吧
我們在做導航標簽的時候,有時會出現空間過于擁擠需要隱藏部分內容的情況,所以在這里我自己寫了一個鼠標懸停顯示擴展內容的效果,如下圖所示。
總的來說效果還是比較好實現,但是比較頭疼的是三角部分使用了偽元素::after,而對父元素設置 over-flow:hidden 時也會把偽元素給隱藏掉。最后想的辦法是把文字和圖標用一個 <span> 包裹住然后對其設置over-flow屬性。
HTML代碼:
CSS Code復制內容到剪貼板
- <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實現鼠標懸停顯示擴展內容 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
- 圖片輪播效果在各大網站都能用到,本文給大家分享通過純css3制作輪播效果圖的思路,感興趣的朋友一起看看吧2016-08-25
CSS3利用text-shadow屬性實現多種效果的文字樣式展現方法
下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實現多種效果的文字樣式展現方法。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-25- 本特效是一款使用純CSS3制作的單頁切換導航菜單界面設計效果的代碼。導航按鈕時,相應的頁面會從屏幕右側滑動出來2016-08-24
- 本特效是一款使用純CSS3制作的超酷文章卡片UI設計效果的代碼。帶有陰影效果,描述信息會以滑動動畫的方式出現2016-08-23
- 這篇文章介紹的是利用CSS3實現當鼠標移動到門上會自動開門,當鼠標移開后會自動關閉門的效果,實現以后效果很贊,有需要的可以參考借鑒。2016-08-22
- 本特效是一款使用CSS3制作的垂直列表面板設計效果的代碼??捎糜谥谱魑恼铝斜恚判辛斜淼?,歡迎下載使用2016-08-22
- 下面小編就為大家?guī)硪黄狢SS3繪制六邊形的簡單實現。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-25