欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3實現鼠標懸停顯示擴展內容

  發(fā)布時間：2016-08-24 16:27:55   作者：佚名   我要評論
本文給大家分享css3代碼實現鼠標懸停顯示要擴展的內容，在空間過于擁擠時需要隱藏部分內容使用此功能比較好，下面小編給帶來了具體實現代碼，一起看看吧

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


總的來說效果還是比較好實現，但是比較頭疼的是三角部分使用了偽元素::after，而對父元素設置 over-flow:hidden 時也會把偽元素給隱藏掉。最后想的辦法是把文字和圖標用一個 <span> 包裹住然后對其設置over-flow屬性。

HTML代碼：

CSS Code復制內容到剪貼板
  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實現鼠標懸停顯示擴展內容 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

相關文章

  • 純CSS3實現圖片無間斷輪播效果

    圖片輪播效果在各大網站都能用到，本文給大家分享通過純css3制作輪播效果圖的思路，感興趣的朋友一起看看吧
    2016-08-25

  • CSS3利用text-shadow屬性實現多種效果的文字樣式展現方法

    下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實現多種效果的文字樣式展現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-25

  • 純CSS3單頁切換導航菜單界面特效源碼

    本特效是一款使用純CSS3制作的單頁切換導航菜單界面設計效果的代碼。導航按鈕時，相應的頁面會從屏幕右側滑動出來
    2016-08-24

  • 純CSS3超酷文章卡片UI設計特效源碼

    本特效是一款使用純CSS3制作的超酷文章卡片UI設計效果的代碼。帶有陰影效果，描述信息會以滑動動畫的方式出現
    2016-08-23

  • 利用CSS3實現開門效果實例源碼

    這篇文章介紹的是利用CSS3實現當鼠標移動到門上會自動開門，當鼠標移開后會自動關閉門的效果，實現以后效果很贊，有需要的可以參考借鑒。
    2016-08-22

  • 純CSS3垂直列表面板設計特效源碼

    本特效是一款使用CSS3制作的垂直列表面板設計效果的代碼?？捎糜谥谱魑恼铝斜恚判辛斜淼?，歡迎下載使用
    2016-08-22

  • CSS3繪制六邊形的簡單實現

    下面小編就為大家?guī)硪黄狢SS3繪制六邊形的簡單實現。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-25

最新評論