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

2024-07-11 08:32:31

字体：大中小

来源：转载

供稿：网友

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

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

HTML代码：

CSS Code复制内容到剪贴板

<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; }
}