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

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.

Online Demo

SOURCE download

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 Consulting </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.i7758.com/sitemap.html" class= "Icon-mail" >mail</a>

</div>

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.

. 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 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:

. 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: #fff; 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;}

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

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