Pure CSS implementation of the right bottom of the simple hover effect

We have seen a lot of page right floating effect, the earliest QQ contact panel, couplet ads, and so on, most of them are based on javascript implementation of the dynamic effect, today I give you to share a only CSS with DIV implementation of the right side of the floating effect.

Html

We want the suspension effect to load last, so we usually place it at the end of the page HTML and we create a. Side-bar, which contains QQ online consulting, (mouse slide to pop-up QR code effect), Weibo, and email contact information, and so on, these content we are <a> Label package.

<div class= "Side-bar" >      <a href= "#" class= "ICON-QQ" >qq online enquiry </a>      <a href= "#" class= " Icon-chat "><div class=" chat-tips "><i></i>     </div></a>      <a target= "_blank" href= "" class= "Icon-blog" > Weibo </ a>      <a href= "http://www.helloweba.com/gbook.html" class= "Icon-mail" >mail</a>  

Css

We use CSS to complete the floating mouse popup effect. We prepare a picture right_bg.png, which contains several icons for the content, and then background-position the contents of a For each icon. We use position:fixed and set the bottom and right values to fix the. Side-bar in the lower-left corner so that no matter how the page scrolls, the. Side-bar will always remain in the lower right corner of the same position. Here need to mention IE6 under the fixed effect needs to be dealt with separately, but this article does not explain, give up IE6 bar.

　　

                 

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

　　

Just a few lines of CSS code to complete a simple bottom-right suspension effect, go to try it.

Demo Address: http://www.helloweba.com/demo/fixedright/cssfixed.html

SOURCE Download: http://www.helloweba.com/down-268.html

Pure CSS implementation of the right bottom of the simple hover effect