实现效果如下：
1

CSS

.sidebar{
position: fixed; right: 0; top: 50%; margin-top: -80px; width: 55px; background: rgba(0,0,0,0.3); padding: 12px 0 0 0; border-radius:8px 0 0 8px; z-index:999999;
}
.sidebar li{
height: 50px; width: 160px; padding-left: 17px; border-radius:8px 0 0 8px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.sidebar li img{
display: block;
}
.sidebar li:hover{
margin-left: -105px; background: rgba(0,0,0,0.6);
}
a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
li{list-style:none;}

div显示层

<div class="sidebar">
<ul>
<li><a href="tencent://message/?uin=29525487&Site=bdesign.com.cn&Menu=yes" target="_blank"><img src="imgs/img58.png"></a></li>
<li><a href="#"><img src="imgs/img59.png"></a></li>
<li><a href="#"><img src="imgs/img611.png"></a></li>
<li><a href="#"><img src="imgs/email.png"></a></li>
<li><a href="#hero"><img src="imgs/img60.png"></a></li>
</ul>
</div>

纯css打造漂亮的wordpress在线客服完整实例：纯CSS在线客服

结合wordpress主题实现纯css在线客服，这种效果可以避免坑爹的jquery冲突问题。直接在实例的代码copy到主题的footer.php

或者主题选项都可以。

标签：CSS

你的评论