亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-06-29 14:05:54 來源:億速云 閱讀:144 作者:小新 欄目:web開發

這篇文章給大家分享的是有關CSS3如何實現鼠標懸停顯示擴展內容 的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

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

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如何實現鼠標懸停顯示擴展內容 ”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

新邵县| 顺义区| 特克斯县| 杂多县| 芜湖市| 广州市| 灵石县| 紫金县| 夏邑县| 东台市| 广西| 永胜县| 江山市| 应城市| 博乐市| 辽阳市| 无为县| 通江县| 米脂县| 霸州市| 阿尔山市| 都江堰市| 富顺县| 崇信县| 灌南县| 诏安县| 余江县| 凤台县| 临颍县| 陵川县| 双鸭山市| 商水县| 巴林左旗| 武威市| 义乌市| 康乐县| 隆德县| 隆回县| 朝阳市| 五台县| 镇原县|