1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: none; 11 } 12 ul, li { 13 list-style: none; 14 } 15 16 body{ 17 background: #ccc; 18 } 19 20 #box { 21 150px; 22 height: 20px; 23 border: 1px solid white; 24 cursor: pointer; 25 } 26 #list { 27 100px; 28 height: 150px; 29 background: black; 30 border: 1px solid white; 31 color: white; 32 display: none; 33 } 34 #list li{ 35 border-bottom: 1px dashed white; 36 height: 29px; 37 line-height: 29px; 38 text-align: center; 39 cursor: pointer; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="box">请选择游戏名称</div> 45 <ul id = "list"> 46 <li>英雄联盟</li> 47 <li>魔兽世界</li> 48 <li>大话西游</li> 49 <li>天龙八部</li> 50 <li>九阴真经</li> 51 </ul> 52 53 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 54 <script type="text/javascript"> 55 $(function () { 56 $("#box, #list").mouseenter(function () { 57 $("#list").show(); 58 }); 59 $("#box, #list").mouseleave(function () { 60 $("#list").hide(); 61 }); 62 63 $("#list li").mouseenter(function () { 64 $(this).css("background", "gray"); 65 }); 66 67 $("#list li").mouseleave(function () { 68 $(this).css("background", "black"); 69 }); 70 71 $("#list li").click(function(){ 72 $("#box").html($(this).html()); 73 }) 74 }) 75 </script> 76 </body> 77 </html>
