您现在的位置是：网站首页> 编程资料编程资料

CSS3实现鼠标悬停显示扩展内容 纯CSS3实现图片无间断轮播效果CSS3利用text-shadow属性实现多种效果的文字样式展现方法纯CSS3单页切换导航菜单界面特效源码纯CSS3超酷文章卡片UI设计特效源码利用CSS3实现开门效果实例源码纯CSS3垂直列表面板设计特效源码CSS3绘制六边形的简单实现

2021-09-04 868人已围观

简介 本文给大家分享css3代码实现鼠标悬停显示要扩展的内容，在空间过于拥挤时需要隐藏部分内容使用此功能比较好，下面小编给带来了具体实现代码，一起看看吧

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


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

HTML代码：

CSS Code复制内容到剪贴板
  1.     "nav">   
  2.        "nav-main">"icon-home"> 主界面   
  3.          "nav-sum">"icon-laptop"> 统计界面   
  4.    
    
  •   
  • 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实现鼠标悬停显示扩展内容 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

    上一篇：利用CSS3实现开门效果实例源码纯CSS3实现图片无间断轮播效果CSS3利用text-shadow属性实现多种效果的文字样式展现方法纯CSS3单页切换导航菜单界面特效源码CSS3实现鼠标悬停显示扩展内容 纯CSS3超酷文章卡片UI设计特效源码纯CSS3垂直列表面板设计特效源码CSS3绘制六边形的简单实现

    下一篇：CSS3绘制六边形的简单实现css3实现六边形边框的实例代码css画正六边形的两种方法css实现六边形图片的示例代码CSS实现图片背景填充的六边形的示例代码纯css绘制蜂巢六边形效果纯css实现的六边形(蜂窝)导航效果(支持hover/兼容浏览器)CSS 实现蜂巢/六边形图集的示例代码

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网