Pure CSS combined with div implementation of the right bottom of the simple suspension effect

We have seen many pages on the right floating effect, the earliest QQ contact panel, couplet ads, and most of them are based on the dynamic effect of JavaScript, today I would like to share a just CSS with DIV implementation of the right floating effect.

HTML

We want the suspension effect to finally load, so we typically place it at the end of the page HTML, and we build a. Side-bar, which contains QQ online consultation, micro-mail (mouse slide pop-up two-dimensional code effect), micro-blog, and email contact information, and so on, these content we are to <a > tag Package.

The

code is as follows:


&lt;div class= "Side-bar" &gt;


&lt;a href= "#" class= "ICON-QQ" &gt;qq online consultation &lt;/a&gt;


&lt;a href= "#" class= "Icon-chat" &gt; Micro-letter &lt;div class= "Chat-tips" &gt;&lt;i&gt;&lt;/i&gt;


&lt;img style= "width:138px;height:138px src=" helloweba.jpg "_fcksavedurl=" "Helloweba.jpg" "alt=" micro-Credit Subscription No. &gt; &lt;/div&gt;&lt;/a&gt;


&lt;a target= "_blank" href= "" class= "Icon-blog" &gt; Weibo &lt;/a&gt;


&lt;a href=&lt;a href= "http://www.jb51.net" &gt;http://www.jb51.net&lt;/a&gt; class= "Icon-mail" &gt;mail&lt;/a &gt;


&lt;/div&gt;

CSS

We use CSS to complete the float that is, the mouse sliding pop-up effect. We prepare a picture right_bg.png, containing a few icons of the content, and then through the Background-position each icon corresponding to a content. We use position:fixed and set the bottom and right values to fix the. Side-bar in the lower right-hand corner so that no matter how the page scrolls, the. Side-bar will remain in the lower-right corner. Here need to mention under IE6 fixed effect need to deal with separately, but this article does not make the detailed explanation, give up IE6 bar.

The

code is as follows:


. Side-bar a,.chat-tips I {background:url (right_bg.png) no-repeat;}


. Side-bar {width:66px;position:fixed;bottom:20px;right:25px;font-size:0;line-height:0;z-index:100;}


. Side-bar a {width:66px;height:66px;display:inline-block;background-color: #ddd; margin-bottom:2px;}


. Side-bar a:hover {background-color: #669fdd;}


. Side-bar. icon-qq {background-position:0 -62px;}


. Side-bar. icon-chat {background-position:0 -130px;position:relative;}


. Side-bar. icon-blog {background-position:0 -198px;}


. Side-bar. icon-mail {background-position:0 -266px;}

There is also a mouse to the micro-letter icon effect, when the mouse hover,. The display property of the Chat-tips is set to block and the location is set, and the Code also contains an arrow's CSS notation:

The

code is as follows:


. Side-bar icon-chat:hover. chat-tips {display:block;}


. chat-tips {padding:20px;border:1px solid #d1d2d6;p osition:absolute;right:78px;top: -55px;background-color: #ff F;display:none;}


. Chat-tips I {width:9px;height:16px;display:inline-block;position:absolute;right: -9px;top:80px; background-position:-88px-350px;}


. chat-tips img {width:138px;height:138px;}

A simple few lines of CSS code to complete a simple lower right corner of the suspension effect, go and try it.