老师打扰了,就是使用了hover方法后无法正常显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/ui.css"> <title>幕淘网</title> </head> <body> <!-- top部分 --> <div class="top"> <div class="center"> <div class="left top-left"> <ul> <li class="left"> <a href="#1" style="color: #f01414;">亲,请登录</a></li> <li class="left"><a href="#1">免费注册</a></li> <li class="left"><a href="#1">手机逛幕多多</a></li> </ul> </div> <div class="right"> <div class="top-dropdown"> <div class="left dropdown-item "> <div class="dropdown-toggle"> <a href="">我的幕多多</a> <i class="dropdown-icon"></i> </div> <ul class="dropdown-layer dropdown-left"> <li> <a href="" class="dropdown-items">已买到的宝贝</a> <a href="" class="dropdown-items">我的足迹</a> </li> </ul> </div> <div class="left dropdown-item"> <div class="dropdown-toggle"> <a href=""> 收藏夹</a><i class="dropdown-icon"></i></div> <ul class="dropdown-layer dropdown-left"> <li><a href="###" target="_blank" class="dropdown-items">收藏的宝贝</a></li> <li><a href="###" target="_blank" class="dropdown-items">收藏的店铺</a></li> </ul> </div> <div class="left dropdown-item"> <div class="dropdown-toggle"> <a href=""> 商品分类</a></div> </div> <div class="left dropdown-item"> <div class="dropdown-toggle"><a href="">卖家中心</a><i class="dropdown-icon"></i></div> <ul class="dropdown-layer dropdown-left"> <li><a href="###" target="_blank" class="dropdown-items">免费开店</a></li> <li><a href="###" target="_blank" class="dropdown-items">已卖出的宝贝</a></li> <li><a href="###" target="_blank" class="dropdown-items">出售中的宝贝</a></li> <li><a href="###" target="_blank" class="dropdown-items">卖家服务市场</a></li> <li><a href="###" target="_blank" class="dropdown-items">卖家培训中心</a></li> <li><a href="###" target="_blank" class="dropdown-items">体验中心</a></li> </ul> </div> <div class="left dropdown-item "> <div class="dropdown-toggle"><a href=""> 联系客服</a><i class="dropdown-icon"></i></div> <ul class="dropdown-layer dropdown-right"> <li><a href="###" target="_blank" class="dropdown-items">消费者客服</a></li> <li><a href="###" target="_blank" class="dropdown-items">卖家客服</a></li> </ul> </div> </div> </div> </div> </div> <!---------------------------------------- top部分 -------------------------------> <!---------------------------------- logo部分------------------------------- --> <div class="logo"> <div class="center"> <div class="logo-logo left"> <a href="" class="logo-logo-img"></a> </div> <div class="logo-search left"> <form action="https://s.taobao.com/search" id="form"> <input type="text" placeholder="灵魂没事一元抢" name="q" class="left search-input" autocomplete="off"></input> <input type="submit" value="搜索" class="left search-submit"></input> </form> <ul class="search-layer"> <!-- <li class="search-layer-item text-ellipsis">123</li> <li class="search-layer-item text-ellipsis">123</li> <li class="search-layer-item text-ellipsis">123</li> --> </ul> </div> </div> </div> </div> </div> <!-- -----------------------------------logo部分----------------------------------------- --> <!-- -----------------------------------------------nav部分---------------------------------------- --> <div class="nav"> <div class="center"> <div class="nav-item"> <a href="">数码城</a> <a href="">天黑黑</a> <a href="">团购</a> <a href="">发现</a> <a href="">二手特价</a> <a href="">名品汇</a> </div> </div> </div> <!-- -----------------------------------------------nav部分---------------------------------------- --> <!-- -----------------------------------banner部分----------------------------------------- --> <div class="banner"> <div class="center clearfloat"> <!-- 商品分类 --> <div class="commodity left" id="focus-category"> <div class="commodity-top"> <img src="./img/九宫格.png" alt=""> 商品分类 </div> <ul class="commdity-itmes"> <!-- <div class="commdity-names"> <a class="commdity-name left"> 家用电器 </a> <i class="right">></i> </div> --> <li class="dropdown" data-active="category" data-load="js/1.json"> <div class="commdity-names "> <a href="###" target="_blank" class="commdity-name left">家用电器</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <dl class="category-details clearfloat"> <dt class="category-details-title left"> <a href="###" target="_blank" class="category-details-title-link">电视</a> </dt> <dd class="category-details-item left"> <a href="###" target="_blank" class="link">国产品牌</a> <a href="###" target="_blank" class="link">对讲机</a> <a href="###" target="_blank" class="link">以旧换新</a> </dd> </dl> </div> </li> <li class="dropdown" data-active="category" data-load="js/2.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">手机</a > <a href="###" target="_blank" class="commdity-name left">运营商</a > <a href="###" target="_blank" class="commdity-name left">数码</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <dl class="category-details clearfloat"> <dt class="category-details-title left"> <a href="###" target="_blank" class="category-details-title-link">手机</a> </dt> <dd class="category-details-item left"> <a href="###" target="_blank" class="link">品牌</a> <a href="###" target="_blank" class="link">对讲机</a> <a href="###" target="_blank" class="link">以旧换新</a> </dd> </dl> </div> </li> <li class="dropdown" data-active="category" data-load="js/3.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">电脑</a > <a href="###" target="_blank" class="commdity-name left">办公</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/4.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">家居</a > <a href="###" target="_blank" class="commdity-name left">家具</a > <a href="###" target="_blank" class="commdity-name left">家装</a > <a href="###" target="_blank" class="commdity-name left">厨具</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/5.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">男装</a > <a href="###" target="_blank" class="commdity-name left">女装</a > <a href="###" target="_blank" class="commdity-name left">童装</a > <a href="###" target="_blank" class="commdity-name left">内衣</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/6.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">化妆</a > <a href="###" target="_blank" class="commdity-name left">清洁</a > <a href="###" target="_blank" class="commdity-name left">宠物</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/7.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">运动户外</a > <a href="###" target="_blank" class="commdity-name left">钟表</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/8.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">汽车</a > <a href="###" target="_blank" class="commdity-name left">汽车用品</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/9.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">母婴</a > <a href="###" target="_blank" class="commdity-name left">玩具乐器</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/10.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">食品</a > <a href="###" target="_blank" class="commdity-name left">酒类</a > <a href="###" target="_blank" class="commdity-name left">生鲜</a > <a href="###" target="_blank" class="commdity-name left">特产</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> <li class="dropdown" data-active="category" data-load="js/11.json"> <div class="commdity-names"> <a href="###" target="_blank" class="commdity-name left">医药保健</a> <i class="right">></i> </div> <div class="dropdown-layer" style="display: none;"> <div class="dropdown-loading"></div> </div> </li> </ul> </div> <!-- 轮播图 --> <div class="slideshow left"> <!-- <div class="slideshow-img" style="left: -728px;"> <img src="./img/code/img/focus-slider/5.jpg" alt=""> <img src="./img/code/img/focus-slider/1.jpg" alt=""> <img src="./img/code/img/focus-slider/2.jpg" alt=""> <img src="./img/code/img/focus-slider/3.jpg" alt=""> <img src="./img/code/img/focus-slider/4.jpg" alt=""> <img src="./img/code/img/focus-slider/5.jpg" alt=""> <img src="./img/code/img/focus-slider/1.jpg" alt=""> </div> --> <div class="slideshow-img"> <img src="./img/code/img/focus-slider/1.jpg" alt="" class="slideshow-imgs" data-index="1"> <img src="./img/code/img/focus-slider/2.jpg" alt="" class="slideshow-imgs" data-index="2"> <img src="./img/code/img/focus-slider/3.jpg" alt="" class="slideshow-imgs" data-index="3"> <img src="./img/code/img/focus-slider/4.jpg" alt="" class="slideshow-imgs" data-index="4"> <img src="./img/code/img/focus-slider/5.jpg" alt="" class="slideshow-imgs" data-index="5"> </div> <div class="slideshow-button"> <span class="slideshow-button-item slideshow-button-item-act" data-index="1"></span> <span class="slideshow-button-item" data-index="2"></span> <span class="slideshow-button-item" data-index="3"></span> <span class="slideshow-button-item" data-index="4"></span> <span class="slideshow-button-item" data-index="5"></span> </div> <a href="#2" class="arrow" id="prev"><</a> <a href="#2" class="arrow" id="next">></a> </div> <!-- 便民服务 --> <div class="services right"> <div class="services-top"> <div class="services-top-title"> <div class="left title">慕快报</div> <a href="" class="right">更多 ></a> </div> <div class="services-top-items"> <a href="" class="services-item">[公告] 幕多多启用新客服电话</a> <a href="" class="services-item">[活动] 优选好货</a> <a href="" class="services-item">[公告] 中差评论功能升级</a> <a href="" class="services-item">[公告] 陌生人拼团上线</a> <a href="" class="services-item">[新闻] 售假获刑又起诉</a> </div> </div> <div class="services-middle"> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>话费</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>机票</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>电影票</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>游戏</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>彩票</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>加油卡</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>酒店</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>火车票</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>众筹</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>理财</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>礼品卡</p> </a> </div> <div class="services-middle-item"> <a> <p class='iconfont'></p> <p>多点金</p> </a> </div> </div> <div class="services-bottom"></div> </div> </div> </div> <!-- -----------------------------------banner部分----------------------------------------- --> <script type="text/javascript" src="./js/jq.js"></script> <script type="text/javascript" src="./js/drop.js"></script> <script type="text/javascript" src="./js/hide.js"></script> <!-- <script type="text/javascript" src="./js/slideshow.js"></script> --> <script type="text/javascript" src="./js/search.js"></script> <script type="text/javascript" src="./js/toolbar.js"></script> </body> </html>
.clearfloat { zoom: 1; } .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } * { margin: 0; padding: 0; } body { overflow-y: scroll; } a { text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; } ul, li { list-style: none; } .right { float: right; } .left { float: left; } .center { margin: 0 auto; width: 1200px; } .text-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /*icon*/ @font-face { font-family: "iconfont"; src: url('../font/iconfont.eot'); /* IE9*/ src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../font/iconfont.woff2') format('woff2'), /* */ url('../font/iconfont.woff') format('woff'), /* */ url('../font/iconfont.ttf') format('truetype'), /* */ url('../font/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 14px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .transition { -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s; transition: all .6s; transform: ; } .top { height: 44px; background: #f3f5f7; font-size: 10px; } .top .center { border-bottom: 1px solid #cdd0d4; height: 43px; line-height: 43px; } .top .top-left li a { display: inline-block; padding-left: 25px; color: #4d555d; } .top-dropdown .dropdown-item a:hover, .top .top-left li a:hover { color: #f01414; text-decoration: none; } .top-dropdown { height: 100%; } .dropdown-toggle { position: relative; z-index: 2; display: block; height: 100%; padding: 0 16px 0 12px; border-left: 1px solid #f3f5f7; border-right: 1px solid #f3f5f7; } .top-dropdown .dropdown-item { position: relative; } .dropdown-icon { display: inline-block; width: 8px; height: 6px; background: url(../img/code/img/dropdown-arrow.png) no-repeat; margin-left: 8px; vertical-align: middle; cursor: pointer; } .top-dropdown .dropdown-item a { color: #4d555d; } .dropdown-left { left: 0; right: auto; } .dropdown-right { right: 0; left: auto; } .dropdown-layer { display: none; position: absolute; top: 43px; background-color: #fff; z-index: 1; border: 1px solid #cdd0d4; } .dropdown-items { display: block; height: 30px; line-height: 30px; padding: 0 12px; color: #4d555d; white-space: nowrap; } .dropdown-items:hover { background-color: #f3f5f7; } .dropdown-active .dropdown-toggle, .dropdown:hover .dropdown-toggle { background-color: #fff; border-color: #cdd0d4; } .dropdown-active .dropdown-icon, .dropdown:hover .dropdown-icon { background-image: url(../img/code/img/dropdown-arrow-active.png); } .dropdown-active .dropdown-layer, .dropdown:hover .dropdown-layer { display: block; } /* -----------------top部分------------------------ */ /* ------------------logo部分------------------- */ .logo { background: #f3f5f7; line-height: 126px; height: 126px; width: 100%; } .logo-logo a { cursor: pointer; display: block; width: 212px; height: 58px; margin: 36px 0 0 15px; text-indent: -9999px; overflow: hidden; background: url(../img/code/img/header-logo.png) no-repeat; } .logo-search { width: 680px; height: 42px; border: 1px solid #cfd2d5; margin-top: 38px; margin-left: 150px; position: relative; } .search-input { width: 586px; height: 42px; border: none; background: #fff; padding: 0 10px; line-height: 42px; } .search-submit { border: none; outline: none; background: #ca003f; color: #fff; height: 42px; width: 74px; cursor: pointer; } .search-layer { display: none; position: absolute; top: 100%; left: -1px; width: 100%; background-color: #fff; border: 1px solid #cfd2d5; z-index: 99; } .search-layer-item { height: 24px; line-height: 24px; padding: 0 10px; cursor: pointer; } .search-layer-item:hover { background-color: #f3f5f7; } /* ------------------logo部分------------------- */ /* ------------------nav部分------------------- */ .nav { background: #ca003f; width: 100%; height: 50px; line-height: 50px; margin-bottom: 8px; } .nav .nav-item { position: relative; margin-left: 300px; } .nav .nav-item a { display: inline-block; height: 50px; line-height: 50px; margin-right: 62px; color: #fff; padding: 0 10px; } .nav .nav-item a:hover { color: red; background: #000000; } /* ----------------------------nav部分--------------------------------------- */ /* -------------------------------------banner部分--------------------------- */ .banner { height: 504px; width: 100%; background: #f3f5f7; margin-bottom: 10px; } .commodity { background: #c1043f; position: relative; width: 208px; height: 566px; margin-top: -62px; margin-right: 8px; color: #fff; z-index: 9; } .commodity-top { margin-top: 12px; height: 50px; width: 100%; } .commodity-top img { width: 12px; height: 12px; background-color: #c1043f; margin-left: 24px; margin-right: 12px; } .commdity-itmes { width: 208px; height: 504px; color: #fff; } .commdity-names { width: 100%; height: 22px; margin-bottom: 14px; padding: 5px 0; } .commdity-name { margin-left: 16px; font-size: 14px; color: #fff; } .commdity-names i { margin-right: 12px; font-size: 12px; } .banner .commodity .commdity-names-act { background: #fff; } .banner .commodity .commdity-names-act .commdity-name, .banner .commodity .commdity-names-act i { color: #c1043f; } /* 下拉层 */ .commdity-itmes { position: relative; } .commdity-itmes .dropdown-layer { display: block; position: absolute; left: 208px; top: -8px; width: 744px; min-height: 472px; background-color: #fff; padding: 8px 0 31px 0; } .category-details { width: 744px; margin-top: 24px; line-height: 20px; } .category-details .category-details-title { width: 84px; padding-right: 16px; border-right: 1px solid #d9dde1; text-align: right; } .category-details .category-details-title-link { color: #07111b; font-weight: bold; } .category-details .category-details-item { width: 592px; padding-left: 15px; } .category-details .category-details-item .link { color: #000000; display: inline-block; margin-right: 16px; font-size: 12px; } /* ----------轮播图------------------ */ .slideshow { position: relative; height: 504px; width: 728px; overflow: hidden; } .slideshow-img { height: 504px; width: 728px; position: absolute; } /* .slideshow-img img { float: left; } */ .slideshow .arrow { position: absolute; color: #fff; background: #000000; height: 90px; width: 46px; line-height: 90px; font-size: 35px; text-align: center; display: none; } .slideshow #prev { left: 0; top: 50%; margin-top: -45px; } .slideshow #next { right: 0; top: 50%; margin-top: -45px; } .slideshow-button { position: absolute; bottom: 0; left: 50%; margin-bottom: 26px; margin-left: -46px; display: none; } .slideshow-button .slideshow-button-item { float: left; display: block; height: 7px; width: 7px; background: grey; margin-right: 12px; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .slideshow .slideshow-button .slideshow-button-item-act { background: #fff; border: 1px solid grey; } /* ------------便民服务---------- */ .services { height: 504px; width: 248px; } .services .services-top { height: 197px; width: 247px; border: 1px solid #d9dde1; border-bottom: none; } .services-top-title { height: 52px; width: 100%; line-height: 52px; } .services-top-title a { color: #4d555d; font-size: 11px; margin-right: 30px; } .services-top-title .title { color: #f01414; margin-left: 16px; font-size: 18px; } .services-top-items { width: 100%; height: 162px; margin-left: 16px; } .services-item { display: block; height: 14px; margin-bottom: 15px; color: #4d555d; font-size: 13px; } .services-top-items a:hover { color: #f01414; } .services .services-middle { height: 216px; width: 248px; border-left: 1px solid #d9dde1; } .services-middle-item { width: 61px; height: 71px; border-top: 1px solid #d9dde1; border-right: 1px solid #d9dde1; float: left; } .services-middle-item:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); } .services-middle-item .iconfont { color: #f67272; font-size: 23px; /* transition-duration: .6s; */ -webkit-transition: -webkit-transform .6s; -moz-transition: -moz-transform .6s; -ms-transition: -ms-transform .6s; -o-transition: -o-transform .6s; transition: transform .6s; } /* 运动 */ .services-middle-item:hover .iconfont { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } /* @keyframes move { 0% { transform: translateY(-10px); } 100% { transform: translateY(0); } } */ .services-middle-item p { font-size: 2px; } .services-middle-item a { margin-top: 18px; display: block; text-align: center; } .services .services-bottom { height: 89px; width: 248px; background: url(../img/code/img/focus-ad.png); } /* -----------------------------banner部分-------------------------------- */
var dropdown = $(".dropdown"); var commditynames = dropdown.find(".commdity-names"); var dropdownlayer = dropdown.find(".dropdown-layer"); dropdown.hover(function(e) { var index = $(this).index(); console.log(index); commditynames.removeClass("commdity-names-act").eq(index).addClass("commdity-names-act"); loadOnce($(this), createCategoryDetails); $(this).find(".dropdown-layer").show(); e.stopPropagation(); }, function(e) { commditynames.removeClass("commdity-names-act"); loadOnce($(this), createCategoryDetails); $(this).find(".dropdown-layer").hide(); e.stopPropagation(); }) function createCategoryDetails($elem, data) { var html = ''; for (var i = 0; i < data.length; i++) { html += '<dl class="category-details clearfloat"><dt class="category-details-title left"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item left">'; for (var j = 0; j < data[i].items.length; j++) { html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>'; } html += '</dd></dl>'; } // setTimeout(function () { $elem.find('.dropdown-layer').html(html); // },1000); }; function loadOnce($elem, success) { var dataLoad = $elem.data('load'); if (!dataLoad) return; if (!$elem.data('loaded')) { $elem.data('loaded', true); $.getJSON(dataLoad).done(function(data) { if (typeof success === 'function') success($elem, data); }).fail(function() { $elem.data('loaded', false); }); } }
14
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星