晰月银光 晰月银光
关注数: 1 粉丝数: 117 发帖数: 545 关注贴吧数: 2
jQuery手风琴制作失败 .....求大神帮我找一下问题...谢谢 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width:165px; border:1px soild #999; padding: 0; border-radius:2px ; } #box ul{ padding: 0; margin: 0; } a{ text-decoration: none; color: #000099; } #box li{ list-style: none; font-size: 14px; border-bottom:1px solid #999 ; position: relative; } #box li:last-child{ border-bottom: none; } #box li:nth-child(odd){ height: 130px; } #box li:nth-child(even){ height: 20px; padding-left:10px ; } .number{ width: 16px; height: 16px; background: #f00; border-radius:50% ; position: absolute; top: 10px; left: 10px; color: #FFFFFF; text-align: center; z-index: 100; } .pic{ display:block; width: 80px; height: 80px; position: absolute; left: 20px; top: 20px; z-index: 10; } .pic img{ width: 80px; height: 80px; } .name{ display: block; position: absolute; top: 100px; left: 30px; font-weight: bold; font-family: "agency fb"; } .price{ display: block; position: absolute; top: 80px; left: 100px; font-size: 18px; color: #FF0000; font-weight: bold; height: 25px; line-height: 25px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> <script> $(function(){ $("#box li:even").hide(); $("li:frist").show(); $("#box li:odd").mousemove(function(){ $("#box li:even").hide(); $(this).prev().show(); }) }) </script> </head> <body> <div id="box"> <ul> <li> <span class="number">1</span> <span class="pic"><img src="img/book-1.jpg"></span> <span class="name">解忧杂货店</span> <span class="price">¥27.3</span> </li> <li> <span class="itemID">1</span> <a href="#">解忧杂货店</a> <span class="price2">¥27.3</span> </li> <li> <span class="number">2</span> <span class="pic"><img src="img/book-2.jpg"></span> <span class="name">人间</span> <span class="price">¥27.3</span> </li> <li> <span class="itemID">2</span> <a href="#">人间</a> <span class="price2">¥27.3</span> </li> <li> <span class="number">3</span> <span class="pic"><img src="img/book-3.jpg"></span> <span class="name">神奇校车</span> <span class="price">¥27.3</span> </li> <li> <span class="itemID">3</span> <a href="#">神奇校车</a> <span class="price2">¥27.3</span> </li> <li> <span class="number">4</span> <span class="pic"><img src="img/book-4.jpg"></span> <span class="name">快车</span> <span class="price">¥27.3</span> </li> <li> <span class="itemID">4</span> <a href="#">快车</a> <span class="price2">¥27.3</span> </li> <li> <span class="number">5</span> <span class="pic"><img src="img/book-5.jpg"></span> <span class="name">地图</span> <span class="price">¥27.3</span> </li> <li> <span class="itemID">5</span> <a href="#">地图</a> <span class="price2">¥27.3</span> </li> </ul> </div> </body> </html>
1 下一页