CSS3实现鼠标悬停显示扩展内容

我们在做导航标签的时候，有时会出现空间过于拥挤需要隐藏部分内容的情况，所以在这里我自己写了一个鼠标悬停显示扩展内容的效果，如下图所示。
 

总的来说效果还是比较好实现，但是比较头疼的是三角部分使用了伪元素::after，而对父元素设置 over-flow:hidden 时也会把伪元素给隐藏掉。最后想的办法是把文字和图标用一个 包裹住然后对其设置over-flow属性。

HTML代码：

CSS Code 复制内容到剪贴板

    "nav">
       "nav-main">"icon-home"> 主界面
         "nav-sum">"icon-laptop"> 统计界面

    

  

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实现鼠标悬停显示扩展内容 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！