分享一个简单的在线客服代码 纯css无js 兼容好

效果演示

代码

<div class="online_kefu">
	<ul>
		<li><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><span class="span1"></span><label>在线QQ</label></a></li>
		<li><a href="tel:010-88885558"><span class="span2"></span><label>010-88885558</label></a></li>
		<li><a href="#"><span class="span3"></span><label class="lbl_img"><img src="images/weixin.png"></label></a></li>
		<li><a href="javascript:void(0)" class="gotop" onclick="$('html,body').stop().animate({scrollTop:0},800)"><span class="span4"></span></a></li>
	</ul>
</div>
<style>
.online_kefu {position: fixed;top: 50%;right: 0;z-index: 1001;}
.online_kefu li{list-style:none;}
.online_kefu li a {display: block;width: 52px;height: 52px;margin-bottom: 1px;position: relative;background: #00994e;z-index: 1;}
.online_kefu li a:hover span, .online_kefu li a:hover label {background-color: #00994e !important;}
.online_kefu li:last-child a {border-bottom: 0;}
.online_kefu li a span {display: block;width: 52px;height: 52px;position: relative;z-index: 100;background-position: center center;background-repeat: no-repeat;}
.online_kefu li:nth-child(2) a, .online_kefu li:nth-child(1) a {z-index: 2;}
.online_kefu li a label {display: block;width: 100px;white-space: nowrap;padding: 0 20px;position: absolute;line-height: 52px;color: #fff;z-index: -1;background: #00994e;bottom: 0;left: 100%;box-sizing: inherit;max-width: 300%;}
.online_kefu li a:hover label {left: -120px;}
.online_kefu li a .lbl_img {padding: 10px;height: auto;line-height: normal;}
.online_kefu li a .lbl_img img{max-width:100%;}
.online_kefu li a span.span1 {background-image: url(images/full1.png);}
.online_kefu li a span.span2 {background-image: url(images/full2.png);}
.online_kefu li a span.span3 {background-image: url(images/full3.png);}
.online_kefu li a span.span4 {background-image: url(images/full4.png);}
</style>

下载

 点击下载