jq-demo-点击选择（英雄联盟） 

 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                 width: 150px;
22                 height: 20px;
23                 border: 1px solid white;
24                 cursor: pointer;
25             }
26             #list {
27                 width: 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>

 

posted @ 2017-09-08 16:12  铜镜123  阅读(212)  评论(0)    收藏  举报