jQuery滑鼠懸停展示下拉框
阿新 • • 發佈：2018-11-03
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery實現懸停下拉選單</title> <style type="text/css"> *{ margin:0px; padding:0px; } ul{ display: inline-block; list-style: none; } li{ display: none; } .btn{ float: left; //頂端對齊 display: inline-block;(預設居中對齊) } </style> </head> <body> <div class="btn"> <div>標籤一</div> <ul> <li> 一 </li> <li> 二 </li> <li> 三 </li> </ul> </div> <div class="btn"> <div>標籤二</div> <ul> <li> 一 </li> <li> 二 </li> <li> 三 </li> </ul> </div> <div class="btn"> <div>標籤三</div> <ul> <li> 一 </li> <li> 二 </li> <li> 三 </li> </ul> </div> </body> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script> $('.btn').mouseover(function(){ $(this).find('li').show(); }) $('.btn').mouseout(function(){ $(this).find('li').hide(); }) </script> </html>