深刻java渣滓收受接管的詳解。本站提示廣大學習愛好者：（深刻java渣滓收受接管的詳解）文章只能為提供參考，不一定能成為您想要的結果。以下是深刻java渣滓收受接管的詳解正文
我們在做導航標簽的時刻，有時會湧現空間過於擁堵須要隱蔽部門內容的情形，所以在這裡我本身寫了一個鼠標懸停顯示擴大內容的後果，以下圖所示。
總的來講後果照樣比擬好完成，然則比擬頭疼的是三角部門應用了偽元素::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完成鼠標懸停顯示擴大內容 ，願望對年夜家有所贊助，假如年夜家有任何疑問請給我留言，小編會實時答復年夜家的。在此也異常感激年夜家對網站的支撐！
