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

网络
啊，小雪，小雪，来了，来了。从微微的凉风中，从傍晚的喧闹中来了！像春风抖落万树梨花，像天女撒下漫天白絮……你不飘飘悠悠，因为那是骄傲的象征；你不轻轻起舞，因为那是胆小的缩影，听，沙沙沙沙、沙沙沙沙……我好像坐在屋里听那春雨的歌声。

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


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

HTML代码：

CSS Code复制内容到剪贴板
  1. <divid="nav">
  2. <aid="nav-main"><span><iclass="icon-home"></i>主界面</span></a>
  3. <aid="nav-sum"><span><iclass="icon-laptop"></i>统计界面</span></a>
  4. </div>
  6. CSS代码：
  8. /*******************************************************************************/
  9. /***********************************nav**************************************/
  10. /*******************************************************************************/
  11. #nav{
  12. box-sizing:border-box;
  13. width:200px;
  14. height:100%;
  15. position:fixed;
  16. padding-top:80px;
  17. }
  18. #nava{
  19. display:block;
  20. width:30px;
  21. height:52px;
  22. position:relative;
  23. margin-top:50px;
  24. }
  25. #navaspan{
  26. display:inline-block;
  27. width:46px;
  28. height:50px;
  29. font-size:1em;
  30. font-weight:600;
  31. color:rgba(255,255,255,0.9);
  32. text-indent:3px;
  33. line-height:52px;
  34. cursor:pointer;
  35. overflow:hidden;
  36. }
  37. #navaspani{
  38. font-size:1.3em;
  39. }
  40. #nava::after{
  41. content:'';
  42. display:block;
  43. width:0;
  44. height:0;
  45. position:absolute;
  46. rightright:-32px;
  47. bottombottom:0;
  48. border-top:26pxsolidtransparent;
  49. border-right:16pxsolidtransparent;
  50. border-bottom:26pxsolidtransparent;
  51. }
  52. #nav-main{
  53. background-color:rgb(211,83,80);
  54. }
  55. #nav-sum{
  56. background-color:rgb(0,158,163);
  57. }
  58. #nav-main::after{
  59. border-left:16pxsolidrgb(211,83,80);
  60. }
  61. #nav-sum::after{
  62. border-left:16pxsolidrgb(0,158,163);
  63. }
  64. #nava:hover{
  65. -webkit-animation:extend-a0.5s;
  66. -moz-animation:extend-a0.5s;
  67. animation:extend-a0.5s;
  68. width:100px;
  69. }
  70. #navaspan:hover{
  71. -webkit-animation:extend-span0.5s;
  72. -moz-animation:extend-span0.5s;
  73. animation:extend-span0.5s;
  74. width:116px;
  75. }
  76. /*******************a扩展效果******************/
  77. @-webkit-keyframesextend-a{
  78. 0%{
  79. width:30px;
  80. }
  81. 100%{
  82. width:100px;
  83. }
  84. }
  85. @-moz-keyframesextend-a{
  86. 0%{
  87. width:30px;
  88. }
  89. 100%{
  90. width:100px;
  91. }
  92. }
  93. @keyframesextend-a{
  94. 0%{
  95. width:30px;
  96. }
  97. 100%{
  98. width:100px;
  99. }
  100. }
  101. /*******************span扩展效果******************/
  102. @-webkit-keyframesextend-span{
  103. 0%{
  104. width:46px;
  105. }
  106. 100%{
  107. width:116px;
  108. }
  109. }
  110. @-moz-keyframesextend-span{
  111. 0%{
  112. width:46px;
  113. }
  114. 100%{
  115. width:116px;
  116. }
  117. }
  118. @keyframesextend-span{
  119. 0%{
  120. width:46px;
  121. }
  122. 100%{
  123. width:116px;
  124. }
  125. }

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

以上所述是小编给大家介绍的CSS3实现鼠标悬停显示扩展内容 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

本文CSS3如何实现鼠标悬停显示扩展内容到此结束。人，一简单就欢乐，但欢乐的人寥寥无几；一复杂就痛苦，可痛苦的人却熙熙攘攘。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
基于CSS 判断鼠标进入的方向
CSS如何实现鼠标移至图片上显示遮罩层效果
html+css+javascript如何实现跟随鼠标移动显示选中效果
如何利用HTML+CSS如何实现跟踪鼠标移动功能
详解CSS如何实现仿Windows10鼠标照亮边框效果