演示地址：點我
測試代碼如下：
<!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 > <span>包裹查詢</span> </a> <div class="sideInfo"> <p>批量查詢跨境包裹物流派送信息，支持郵政、DHL、UPS、EMS、FedEX等服務。</p> </div> </dd> <dd class="ftName words"> <a > <span>進口個人<br>額度查詢</span> </a> <div class="sideInfo"> <p>查詢通過進口跨境電商渠道購買，已用額度。</p> </div> </dd> <dd class="ftName quote"> <a > <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>新聞熱點
疑難解答
