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

分类：CSS_CSS3 答疑 - 常见问题 · 发布时间：2022-07-14 21:27 · 阅读：8013

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

0133技术栈

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

相关文章

css3媒体查询中device-width和width的区别详解

CSS3媒体查询实现不同宽度的下不同内容的展示功能

CSS3几种实现子容器水平垂直居中的方法

css3实现文字首尾衔接跑马灯的示例代码

CSS的浮动及清除浮动的5种方法介绍