演示地址：点我
测试代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> /*左侧边栏*/ a{ text-decoration: none; } .sideBar { position: fixed; left: 20px; top: 35%; } .sideBar .ftName { position: relative; } .sideBar dl dd { position: relative; width: 80px; height: 80px; background-color: #646577; border-bottom: solid 1px #999; text-align: center; background-repeat: no-repeat; background-position: center 20%; cursor: pointer; } .sideBar dd span { color: #fff; display: block; padding-top: 32px; } .sideBar .Words span { padding-top: 22px; } .sideInfo { position: absolute; left: 90px; top: 0; width: 250px; background-color: #646577; display: none; padding: 0 10px; } .words .sideInfo { padding: 6px 10px; } .sideInfo a, .sideInfo p { color: #fff; } </style></head><body> <!--左侧边栏--> <div class="sideBar"> <dl> <dd class="ftName consult"> <a href="http://www.kytrack.com/"> <span>包裹查询</span> </a> <div class="sideInfo"> <p>批量查询跨境包裹物流派送信息，支持邮政、DHL、UPS、EMS、FedEX等服务。</p> </div> </dd> <dd class="ftName words"> <a href="http://geren.kytrack.com/"> <span>进口个人<br>额度查询</span> </a> <div class="sideInfo"> <p>查询通过进口跨境电商渠道购买，已用额度。</p> </div> </dd> <dd class="ftName quote"> <a href="http://www.expecs.com/"> <span>快邮在线</span> </a> <div class="sideInfo"> <p>快邮在线物流综合服务平台为电商及外贸企业提供物流、通关、金融等服务。</p> </div> </dd> </dl> </div> <script src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> /*侧边栏*/ $('.consult').hover(function(){ if($('.consult .sideInfo').is(':hidden')){ $('.consult .sideInfo').show(); }else{ $('.consult .sideInfo').hide(); } }); $('.words').hover(function(){ if($('.words .sideInfo').is(':hidden')){ $('.words .sideInfo').show(); }else{ $('.words .sideInfo').hide(); } }); $('.quote').hover(function(){ if($('.quote .sideInfo').is(':hidden')){ $('.quote .sideInfo').show(); }else{ $('.quote .sideInfo').hide(); } }); </script></body></html>新闻热点
疑难解答
