鼠标悬停客服代码

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div class="slides"> <ul class="slideul"> <li><a href=""><img src="slide-01.jpg"></a></li> <li class="kefu"> <img src="slide-02.jpg"> <ul class="kefulist"> <li><a href="#">在线客服一</a></li> <li><a href="#">在线客服二</a></li> <li><a href="#">在线客服三</a></li> </ul> </li> </ul></div>

4、书写css代码。<style type="text/css">*{border:0;margin:0;padding:0;}body{font-family:'Microsoft Yahei','微软雅黑',Arial,'Hiragino Sans GB','宋体';font-size:14px; }ul{list-style:none;}/* slides */.slides{position:fixed;right:0;top:45%;}.slides .slideul>li{position:relative;display:block;width:56px;height:56px;margin-bottom:10px;overflow:visible;}.slides .slideul>li.kefu{width:66px;padding-left:10px;margin-left:-10px;}.slides .slideul>li ul.kefulist{position:absolute;left:-86px;top:-30px;padding-right:10px;display:none;}.slides .slideul>li ul.kefulist li{margin-bottom:10px;}.slides .slideul>li ul.kefulist li a{display:block;width:90px;height:30px;line-height:30px;background:#a8defe;color:#fff;text-align:center;text-decoration:none;}.slides .slideul>li ul.kefulist li a:hover{text-decoration:none;}</style>

5、书写并添加js代码。jquery.min.js是一个是个js包，可以网上下载。

6、代码整体结构。

7、查看效果。