<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东左侧菜单</title> <script src="JS/jquery-1.12.4.js"></script> <style> *{ padding: 0; margin: 0; } a{ text-decoration: none; } .nav-top a{ display: block; height: 45px; font-size: 16px; line-height: 45px; padding: 0 10px; background: red; color: white; } ul{ background: orangered; list-style: none; padding-bottom: 2px; } ul li{ height: 30px; line-height: 30px; font-size: 13px; color: white; padding-left: 5px; position: relative; } ul li div{ position: absolute; left: 211px; display: none; } .nav-box{ width: 210px; margin: 5px 0 0 5px; } ul li a{ color: white; } .orange{ background: orange; } .red{ background: orangered; } </style> </head> <body> <div class="nav-box"> <div class="nav-top"> <a href="#">全部商品分类</a> </div> <ul> <li> <a href="#">家用电器</a> <div> <img src="img/erji.jpg" alt=""> </div> </li> <li> <a href="#">手机、数码、京东通信</a> <div> <img src="img/erji1.jpg" alt=""> </div> </li> <li> <a href="#">电脑,办公</a> <div> <img src="img/erji2.jpg" alt=""> </div> </li> <li> <a href="#">家居、家具、家装、厨具</a> <div> <img src="img/erji3.jpg" alt=""> </div> </li> <li> <a href="#">男装、女装、珠宝</a> <div> <img src="img/erji4.jpg" alt=""> </div> </li> </ul> </div> </body> <script> /* * children() : * 返回被选元素直接子节点 * ()中可以写包含匹配元素 * 的选择器表达式 * * toggleClass : * 对所选元素进行样式的切换 * * 关于样式的动态修改 * css() * addClass() * toggleClass() * */ $(document).ready(function () { $("li").hover( function () { //移入 $(this).children("div").show(); // $(this).css("background","orange"); $(this).toggleClass("orange") }, function () { //移出 $(this).children("div").hide(); // $(this).css("background","orangered"); $(this).toggleClass("orange") } ) }) </script> </html>