CSS3 implement mouse hover display extension content

This article to share the CSS3 code to achieve the mouse hover display to expand the content, in the space is too crowded to hide some of the content to use this function is better, the following small series to bring the specific implementation code, see it together

When we do navigation labels, sometimes there is a situation where the space is too crowded to hide part of the content, so here I wrote a mouse hover to display the effect of extending the content, as shown in.

Overall the effect is still relatively good implementation, but the more headache is the triangular part of the use of pseudo-elements:: After, and the parent element set Over-flow:hidden will also be the pseudo-element to be hidden away. The last thing to think about is to wrap the text and the icon in a <span> and set the Over-flow property on it.

HTML code:

    <p id= "NAV" > <a id= "nav-main" ><span><i class= "Icon-home" ></i> main interface </span>&       lt;/a> <a id= "nav-sum" ><span><i class= "Icon-laptop" ></i> Statistics interface </span></a> </p> CSS Code:/*******************************************************************************//*********** 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 extension effect ******************/@-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 extension effect ******************/@-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; }   }

The icon uses the API provided by Font-awesome, which is used to introduce its CSS file.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!