老师当鼠标悬浮上的时候一级标题时没有高光
来源：2-7 实现垂直菜单
我代码么问题
2021-11-06 17:48:12
相关代码：
html <nav class="banner_nav"> <!-- 一级标题 --> <ul class="banner_nav_ul"> <li class="rmcfd_icon cz" data-n="rmcfd_icon"> <dl> <dt>热门出发地</dt> <dd> <a href="#">北京</a> <a href="#">上海</a> <a href="#">广深</a> <a href="#">西南</a> <a href="#">国内其他</a> </dd> </dl> </li> <li class="gat_icon cz" data-n="gat_icon"> <dl> <dt>港澳台 国内</dt> <dd> <a href="#">香港</a> <a href="#">澳门</a> <a href="#">台湾</a> <a href="#">国内其他</a> </dd> </dl> </li> <li class="rh_icon cz" data-n="rh_icon"> <dl> <dt>日本 韩国</dt> <dd> <a href="#">东京</a> <a href="#">大阪</a> <a href="#">冲绳</a> <a href="#">北海道</a> <a href="#">福冈</a> </dd> </dl> </li> <li class="dny_icon cz" data-n="dny_icon"> <dl> <dt>东南亚 南亚</dt> <dd> <a href="#">泰国</a> <a href="#">新加坡</a> <a href="#">马来西亚</a> <a href="#">马尔代夫</a> </dd> </dl> </li> <li class="om_icon cz" data-n="om_icon"> <dl> <dt>欧洲 美洲</dt> <dd> <a href="#">英国</a> <a href="#">法国</a> <a href="#">美国</a> <a href="#">加拿大</a> </dd> </dl> </li> <li class="ax_icon cz" data-n="ax_icon"> <dl> <dt>澳新 中东非</dt> <dd> <a href="#">澳大利亚</a> <a href="#">新西兰</a> <a href="#">迪拜</a> </dd> </dl> </li> </ul> <!-- 二级标题 --> <div class="menu_box"> <!-- 热门出发地 --> <div class="menu" data-n="rmcfd_icon"> <dl> <dt>港澳台</dt> <dd> <a href="">香港</a> <a href="">澳门</a> <a href="">台北</a> <a href="">高雄</a> <a href="">香港迪士尼</a> <a href="">香港海洋公园</a> <a href="">交通接驳</a> <a href="">澳门</a> <a href="">塔新濠天地水舞间</a> <a href="">澳门豪华自助 台北101</a> <a href="">台湾美食</a> </dd> </dl> <dl> <dt>国内热门城市</dt> <dd> <a href="">三亚</a> <a href="">东北雪乡</a> <a href="">大理</a> <a href="">丽江</a> <a href="">昆明</a> <a href="">西双版纳</a> <a href="">拉萨</a> <a href="">成都</a> <a href="">重庆</a> <a href="">长白山</a> <a href="">厦门</a> <a href="">长沙</a> <a href="">桂林北京</a> <a href="">西安</a> <a href="">敦煌</a> <a href="">杭州</a> <a href="">上海</a> <a href="">无锡</a> <a href="">南京</a> <a href="">广州</a> <a href="">黄山</a> <a href="">莫干山</a> <a href="">新疆</a> <a href="">北海</a> <a href="">九华山</a> <a href="">太原</a> <a href="">张家口</a> </dd> </dl> <dl> <dt>热门景点</dt> <dd> <a href="">北京故宫</a> <a href="">东北滑雪</a> <a href="">恭王府</a> <a href="">长城</a> <a href="">青城山大熊猫基地</a> <a href="">峨眉山</a> <a href="">都江堰</a> <a href="">长恨歌表演</a> <a href="">兵马俑</a> <a href="">大唐芙蓉园</a> <a href="">三亚日游</a> <a href="">厦门鼓浪屿</a> <a href="">千岛湖</a> <a href="">呼伦贝尔草原</a> <a href="">希拉穆仁草原</a> <a href="">大理日游</a> <a href="">杭州</a> <a href="">重庆两江夜游船票</a> </dd> </dl> </div> <!-- 港澳台 国内 --> <div class="menu" data-n="gat_icon"> <dl> <dt>港澳台</dt> <dd> <a href="#">香港</a> <a href="#">澳门</a> <a href="#">台北</a> <a href="#">高雄</a> <a href="#">香港迪士尼</a> <a href="#">香港海洋公园</a> <a href="#">交通接驳</a> <a href="#">澳门塔</a> <a href="#">新濠天地水舞间</a> <a href="#">澳门豪华自助</a> <a href="#">台北101</a> <a href="#">台湾美食</a> </dd> </dl> </div> <!-- 日本 韩国 --> <div class="menu" data-n="rh_icon"> <dl> <dt>日本</dt> <dd> <a href="">东京</a> <a href="">大阪</a> <a href="">冲绳</a> <a href="">北海道</a> <a href="">札幌</a> <a href="">京都</a> <a href="">名古屋</a> <a href="">福冈</a> <a href="">长崎</a> <a href="">鹿儿岛</a> <a href="">JR</a> <a href="">Pass</a> <a href="">米其林餐厅</a> <a href="">东京迪士尼</a> <a href="">大阪环球影城</a> <a href="">冲绳一日游</a> <a href="">City</a> <a href="">Walk</a> <a href="">西瓜卡</a> <a href="">京都日游</a> <a href="">和服体验</a> <a href="">包车服务</a> <a href="">富士山日游</a> </dd> </dl> </div> <!-- 东南亚 --> <div class="menu" data-n="dny_icon"> <dl> <dt>泰新马</dt> <dd> <a href="">普吉岛</a> <a href="">清迈</a> <a href="">曼谷</a> <a href="">苏梅岛</a> <a href="">甲米</a> <a href="">芭堤雅</a> <a href="">拜县</a> <a href="">新加坡</a> <a href="">马来西亚</a> <a href="">沙巴</a> <a href="">吉隆坡</a> <a href="">皇帝岛</a> <a href="">泰国人妖</a> <a href="">泰国丛林飞跃</a> <a href="">泰国spa按摩</a> <a href="">清迈夜间动物园</a> <a href="">泰拳表演清莱一日游</a> <a href="">新加坡环球影城</a> <a href="">新加坡日游</a> <a href="">新加坡滨海湾花园</a> <a href="">沙巴美人鱼岛</a> <a href="">沙巴红树林萤火虫</a> </dd> </dl> <dl> <dt>东南亚</dt> <dd> <a href="">巴厘岛</a> <a href="">长滩岛</a> <a href="">马尼拉</a> <a href="">薄荷岛</a> <a href="">美娜多芽庄</a> <a href="">岘港</a> <a href="">富国岛</a> <a href="">柬埔寨</a> <a href="">缅甸</a> <a href="">老挝</a> <a href="">文莱</a> <a href="">蓝梦岛</a> <a href="">巴厘岛SPA</a> <a href="">网红漂浮下午茶</a> <a href="">珍珠岛游乐园</a> <a href="">富国岛浮潜海钓</a> <a href="">吴哥窟</a> <a href="">西哈努克</a> </dd> </dl> <dl> <dt>西亚</dt> <dd> <a href="">马尔代夫</a> <a href="">斯里兰卡</a> <a href="">印度</a> <a href="">尼泊尔</a> <a href="">格鲁吉亚阿塞拜疆</a> <a href="">亚美尼亚</a> </dd> </dl> </div> <!-- 欧洲美洲 --> <div class="menu" data-n="om_icon"> <dl> <dt>欧洲</dt> <dd> <a href="">法国</a> <a href="">意大利</a> <a href="">土耳其</a> <a href="">俄罗斯</a> <a href="">西班牙</a> <a href="">瑞士</a> <a href="">英国</a> <a href="">希腊</a> <a href="">荷兰</a> <a href="">德国</a> <a href="">捷克</a> <a href="">葡萄牙</a> <a href="">奥地利</a> <a href="">瑞典</a> <a href="">丹麦</a> <a href="">挪威</a> <a href="">冰岛</a> <a href="">芬兰</a> <a href="">罗瓦涅米</a> <a href="">奥斯陆</a> <a href="">雷克雅未克</a> <a href="">因特拉肯</a> <a href="">巴塞罗那</a> <a href="">伦敦</a> <a href="">巴黎</a> <a href="">塞纳河</a> <a href="">慕尼黑</a> <a href="">普罗旺斯</a> <a href="">温莎日游</a> <a href="">巴黎迪斯尼</a> <a href="">伊斯坦布</a> <a href="">尔阿尔罕布拉宫</a> <a href="">唐顿庄园</a> <a href="">埃菲尔铁塔</a> <a href="">凡尔赛宫</a> <a href="">北欧破冰船</a> <a href="">极光之旅</a> <a href="">英国天空岛</a> </dd> </dl> <dl> <dt>美洲</dt> <dd> <a href="">美国</a> <a href="">加拿大</a> <a href="">墨西哥</a> <a href="">巴西</a> <a href="">阿根廷</a> <a href="">智利</a> <a href="">秘鲁</a> <a href="">玻利维亚</a> <a href="">洛杉矶</a> <a href="">纽约</a> <a href="">拉斯维加斯</a> <a href="">旧金山</a> <a href="">圣地亚哥芝加哥</a> <a href="">西雅图</a> <a href="">华盛顿</a> <a href="">奥兰多</a> <a href="">夏威夷</a> <a href="">塞班岛</a> <a href="">关岛</a> <a href="">环球影城</a> <a href="">迪士尼</a> <a href="">演出票</a> <a href="">尼亚加拉大瀑布</a> <a href="">帝国大厦</a> <a href="">奥特莱斯</a> <a href="">黄石国家公园</a> <a href="">纽约大都会博物馆</a> <a href="">美国大峡谷西峡</a> <a href="">拉斯维加斯摩天轮</a> <a href="">羚羊峡谷</a> <a href="">马蹄湾</a> </dd> </dl> </div> <!-- 澳新中东非 --> <div class="menu" data-n="ax_icon"> <dl> <dt>澳新 南太平洋</dt> <dd> <a href="">墨尔本</a> <a href="">悉尼</a> <a href="">黄金海岸</a> <a href="">凯恩斯</a> <a href="">布里斯班奥克兰</a> <a href="">斐济</a> <a href="">珀斯</a> <a href="">圣灵群岛</a> <a href="">大堡礁</a> <a href="">墨尔本之星</a> <a href="">悉尼热气球</a> <a href="">水上飞机</a> <a href="">海港大桥</a> <a href="">皇后镇霍比特人村</a> <a href="">怀托莫萤火虫洞</a> <a href="">米尔福德峡湾</a> <a href="">新西兰滑雪</a> <a href="">瓦纳卡</a> <a href=""></a> </dd> </dl> <dl> <dt>中东非</dt> <dd> <a href="">迪拜</a> <a href="">摩洛哥</a> <a href="">毛里求斯</a> <a href="">埃及</a> <a href="">塞舌尔</a> <a href="">马达加斯加</a> <a href="">以色列</a> <a href="">肯尼亚</a> <a href="">南非</a> <a href="">伊朗</a> <a href="">约旦</a> <a href="">突尼斯</a> <a href="">迪拜</a> <a href="">塔法拉利主题公园</a> <a href="">迪拜七星帆船酒店用餐</a> <a href="">夜游迪拜河</a> <a href="">亚特兰蒂斯水上乐园</a> <a href="">动物大迁徙</a> <a href="">撒哈拉沙漠</a> <a href="">金字塔</a> <a href="">纳米比亚</a> </dd> </dl> </div> </div> </nav>
相关代码：
css
.banner .center_wrap .banner_nav{
height: 100%;
width: 652px;
position: relative;
}
.banner .center_wrap .banner_nav ul{
height: 100%;
}
.banner .center_wrap .banner_nav>ul>li{
height: 16.66%;
width: 296px;
background: #1C1F21;
opacity: 0.5;
position: relative;
border-bottom: 1px solid #9e9e9e;
/* box-sizing: border-box属性的作用就让height属性时盒子的总高度
在盒子高度是百分比写的 就要盒子高度边框涵盖在height里面 */
box-sizing: border-box;
}
.banner .center_wrap .banner_nav>ul>li:last-child{
border-bottom: none;
}
/* 左右按钮 */
.banner .center_wrap .left_btn{
position: absolute;
left: -38px;
top: 50%;
width: 28px;
height: 44px;
background:url("../images/icons.png") no-repeat -21px -94px;
margin-top: -22px;
}
.banner .center_wrap .right_btn{
position: absolute;
right: -38px;
top: 50%;
width: 28px;
height: 44px;
background:url("../images/icons.png") no-repeat -21px -29px;
margin-top: -22px;
}
.banner .center_wrap .left_btn:hover , .banner .center_wrap .right_btn:hover{
opacity: 0.5;
}
/* 背景图片上的文字 */
.banner .center_wrap .banner_nav>ul>li dl{
position: absolute;
height: 48px;
top: 50%;
margin-top: -24px;
padding-left: 42px;
color: white;
cursor: pointer;
}
.banner .center_wrap .banner_nav>ul>li dl dt{
font-size: 18px;
margin-bottom: 8px;
}
.banner .center_wrap .banner_nav>ul>li dl dd a{
font-size: 16px;
color:white;
}
.banner .center_wrap .banner_nav>ul>li dl dd a:hover{
color: orange;
}
/* 图标 */
.banner .center_wrap .banner_nav>ul>li::before{
content: '' ;
position: absolute;
width: 40px;
height: 40px;
/* background-color: orange; */
top: 10px ;
left: 10px;
background-image: url("../images/icons.png");
}
/* 热门出发地 */
.banner .center_wrap .banner_nav>ul>li.rmcfd_icon::before{
background-position: -28px -381px;
}
/* 港澳台 */
.banner .center_wrap .banner_nav>ul>li.gat_icon::before{
background-position: -25px -199px;
}
/* 日本 韩国 */
.banner .center_wrap .banner_nav>ul>li.rh_icon::before{
background-position: -24px -154px;
}
/* 东南亚 */
.banner .center_wrap .banner_nav>ul>li.dny_icon::before{
background-position: -24px -247px;
}
/* 欧美 */
.banner .center_wrap .banner_nav>ul>li.om_icon::before{
background-position: -24px -334px;
}
/* 澳新 */
.banner .center_wrap .banner_nav>ul>li.ax_icon::before{
background-position: -24px -289px;
}
.banner .center_wrap .banner_nav .menu_box .menu{
position: absolute;
left: 296px;
top: 0;
width: 356px;
height: 100%;
background-color: #1C1F21;
opacity: 0.7;
padding: 16px;
box-sizing: border-box;
display: none;
}
.banner .center_wrap .banner_nav .menu_box .current{
display: block;
opacity: 0.5;
}
.banner .center_wrap .banner_nav>.menu_box .menu dl{
margin-bottom: 12px;
}
.banner .center_wrap .banner_nav>.menu_box .menu dl dt{
line-height: 30px;
font-size: 16px;
font-weight: bold;
padding-bottom: 4px;
color: white;
}
.banner .center_wrap .banner_nav>.menu_box .menu dl dd{
font-size: 14px;
line-height: 22px;
}
.banner .center_wrap .banner_nav>.menu_box .menu dl dd a{
padding-right: 10px;
color: white;
}
.banner .center_wrap .banner_nav>.menu_box .menu a:hover{
color: gold;
}相关代码：
js
(function(){
// 获取一级标题元素
var bannerNavUl=document.querySelector('.banner_nav_ul');
// 获取一级标题的子元素
var bannerList=bannerNavUl.children;
// 当鼠标离开大盒子的时候二级菜单取消显示
var bannerNav=document.querySelector('.banner_nav');
// 寻找所有的menu
var menus=document.querySelectorAll('.menu_box .menu');
bannerNavUl.addEventListener('mouseover',function(e){
// 采用事件委托获取当前点击的li元素
if (e.target.tagName.toLowerCase()=='li') {
var n= e.target.getAttribute('data-n');
// 根据一级菜单获取对应得二级菜单
var theMenu=document.querySelector('.menu_box .menu[data-n='+n+']');
e.target.className+=' current';
// 排他操作 让所有的盒子都去掉current类
for (let i = 0; i < menus.length; i++) {
menus[i].className='menu';
}
theMenu.className='menu current';
}
});
// 鼠标离开一级菜单，二级菜单消失
bannerNav.addEventListener('mouseleave',function(){
for (let i = 0; i < bannerList.length; i++) {
bannerList[i].className=bannerList[i].getAttribute('data-n');
menus[i].className='menu';
}
});
})()写回答
1回答
-
好帮手慕久久
2021-11-06
同学你好，解答如下:
1、鼠标移入一级菜单，之所以没有高亮显示，是因为css中没有设置样式。老师添加了如下样式，就可以了：
2、鼠标在一级菜单上移动时，需要先将一级菜单所有项的current类名去掉，再给当前项添加current。因此代码需要添加如下内容：
祝学习愉快！
0
相似问题