JavaScript第5章上机练习2(制作当当网顶部导航) 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>制作当当网顶部导航</title>
 6     <style type="text/css">
 7         a {
 8             padding-bottom: 10px;
 9         }
10 
11         .one {
12             margin-bottom: 7px;
13             padding-left: 5px;
14         }
15 
16         * {
17             padding: 0px;
18             margin: 0px;
19         }
20 
21         li {
22             list-style: none;
23             padding: 5px 0px 7px 5px;
24         }
25 
26         a {
27             text-decoration: none;
28             color: gray;
29         }
30 
31         ul {
32             display: none;
33         }
34     </style>
35     <script src="../../js/jquery-3.4.1.js"></script>
36 </head>
37 <body>
38 <div class="title">
39     <div class="one"><a href="#">我的当当</a>
40         <div class="two">
41             <ul>
42                 <li ><a href="#" class="a">我的订单</a></li>
43                 <li ><a href="#" class="a">我的收藏</a></li>
44                 <li ><a href="#" class="a">我的收品卡</a></li>
45                 <li ><a href="#" class="a">我的积分</a></li>
46                 <li ><a href="#" class="a">我的兑换</a></li>
47             </ul>
48         </div>
49     </div>
50 </div>
51 
52 <script type="text/javascript">
53     $(document).ready(function () {
54         $(".one").mouseover(function () {
55             $(this).css({"border": "1px solid #ee7304", "width": "88px", "height": "200px"});
56             $("ul").show();
57             $(".a").mouseover(function () {
58                 $(this).css("color","blue");
59             }).mouseout(function () {
60                 $(this).css("color","gray");
61             })
62         }).mouseout(function () {
63             $(this).css("border", "none");
64             $("ul").hide();
65 
66         })
67     })
68 </script>
69 </body>
70 </html>

 

posted @ 2021-01-20 09:37  残冰辉  阅读(1323)  评论(0)    收藏  举报