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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.