css实现悬浮客服效果

(编辑:jimmy 日期: 2024/10/31 浏览:2)

css实现悬浮客服效果

<div class="sideBar">
    <div>
        <div class="tips">在线客服</div>
        <ul class="list">
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
            <li>QQ:1846492969</li>
        </ul>
    </div>
</div>
.sideBar {
 position:fixed;
 right:-182px;
 top:50px;
 background-color:#ffffff;
 border:#eea236 solid 1px;
 transition:right 0.5s;
 border:solid 1px red;
}
.sideBar:hover {
 right:0;
}
.sideBar>div {
 position:relative;
}
.sideBar .tips {
 position:absolute;
 height:120px;
 line-height:25px;
 background-color:#eea236;
 width:40px;
 left:-40px;
 top:50px;
 text-align:center;
 box-sizing:border-box;
 padding:10px 10px;
 border-top-left-radius:5px;
 border-bottom-left-radius:5px;
 font-weight:bold;
 color:#ffffff;
}
.sideBar .list {
 padding:0;
 list-style:none;
 width:180px;
 margin:0;
}
.sideBar .list>li {
 padding:15px;
 border-top:#eea236 dashed 1px;
}
.sideBar .list>li:hover {
 background-color:#f0ad4e;
 color:#ffffff;
}
.sideBar .list>li:first-child {
 border-top:none;
}

总结

以上所述是小编给大家介绍的css实现悬浮客服效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。