首页 > 作文

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

更新时间:2023-04-06 22:43:25 阅读: 评论:0

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

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

html代码:

css code
复制内容到剪贴板

<divid=“nav”> <aid=“nav-main”><span><iclass=“icon-home”></i>主界面</span></a> <aid=“nav-sum”><span><iclass=“icon-laptop”></i>统计界面</span></a> </div> cs安全手抄报的图片s代码: /*******************************************************************************//***********************************nav**************************************//****************************bear过去式***************************************************/#nav{ box-sizing:border-box; width:200px; height:100%; position:fixed; padding-top:80px; } #nava{ display:block; width:30px; height:52px; position:relative; margin-top:50px; } #navaspan{ display:inlineblock; 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; } #navaspani{ font-size:1.3em; } #nava::after{ content:; display:block; width:0; height:0; position:absolute; rightright:-32px; bottombottom:0; border-top:26pxsolidtransparent; border-right:16pxsolidtransparent; border-bottom:26pxsolidtransparent; } #nav-main{ background-color:rgb(211,83,80); } #nav-sum{ background-color:rgb(0,158,163); } #nav-main::after{ border-left:16pxsolidrgb(211,83,80); } #nav-sum::after{ border-left:16pxsolidrgb(0,158,163); } #nava:hover{ -webkit-animation:extend-a0.5s; -moz-animation:extend-a0.5s; animation:extend-a0.5s; 寒假日记300字大全width:100px; } #navaspan:hover{ -webkit-animation:extend-span0.5s; -moz-animation:extend-span0.5s; animation:extend-span0.5s; width:116px; } /*******************a扩展效黄金时代 王小波果******************/@-webkit-keyframextend-a{ 0%{ width:30px; } 100%{ width:100px; } } @-moz-keyframextend-a{ 0%{ width:30px; } 100%{ width:100px; } } @keyframextend-a{ 0%{ width:30px; } 100%{ width:100px; } } /*******************span扩展效果******************/@-webkit-keyframextend-span{ 0%{ width:46px; } 100%{ width:116px; } } @-moz-keyframextend-span{ 0%{ width:46px; } 100%{ width:116px; } } @keyframextend-span{ 0%{ width:46px; } 100%{ width:116px; } }

其中图标使用的是 font-awesome 提供的api,使用时引入它的css文件即可。

以上所述是www.887551.com给大家介绍的css3实现鼠标悬停显示扩展内容 ,希望对大家有所帮助

本文发布于:2023-04-06 22:43:24,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/67a707d8db264e75791ef549134221a9.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS3实现鼠标悬停显示扩展内容.doc

本文 PDF 下载地址:CSS3实现鼠标悬停显示扩展内容.pdf

标签:的是   鼠标   元素   效果
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图