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

發(fā)布時(shí)間：2016-08-24 16:27:55 作者：佚名

本文給大家分享css3代碼實(shí)現(xiàn)鼠標(biāo)懸停顯示要擴(kuò)展的內(nèi)容，在空間過(guò)于擁擠時(shí)需要隱藏部分內(nèi)容使用此功能比較好，下面小編給帶來(lái)了具體實(shí)現(xiàn)代碼，一起看看吧

我們?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代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

<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)站的支持！