关于显示列表的问题

头部光标放上去时显示列表，光标移走时隐藏列表。

问题：光标移开列表立刻隐藏了，没有机会移动到列表上，请问应该怎么解决啊？谢谢老师

观鱼观猪 2019-06-13

源自：项目：JS表单验证案例 3-10 作业题

收起

6回答

好帮手慕慕子回答被采纳获得+3积分 2019-06-14 12:08:04

同学你好，你的思路很清晰，代码也很简洁，已经很正规了，编程是灵活的，只要效果实现了就是可以的

另，可以使用CSS设置鼠标移入到列表中，列表项字体颜色发生改变哦

祝学习愉快~~~

收起回答

提问者观鱼观猪 2019-06-14 08:24:18

js:

window.onload = function() {

// 获取元素

var getElem = function(selector) {

return document.querySelector(selector);

};

var getAllElem = function(selector) {

return document.querySelectorAll(selector);

};

// 获取元素的样式

var getCls = function(element) {

return element.getAttribute('class');

};

// 设置元素的样式

var setCls = function(element, cls) {

return element.setAttribute('class', cls);

};

// 为元素添加样式

var addCls = function(element, cls) {

var baseCls = getCls(element);

if (baseCls.indexOf(cls) === -1) {

setCls(element, baseCls + ' ' + cls); // 注意空格

}

return;

};

// 为元素删减样式

var delCls = function(element, cls) {

var baseCls = getCls(element);

if (baseCls.indexOf(cls) > -1) {

setCls(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '));

}

return;

};

// 获取imooc节点

var item7 = getElem(".header__nav-item-7");

//获取列表

var list = getElem(".list");

item7.onmouseover = function() {

addCls(list,"header__nav-item-7-show");

};

item7.onmouseout=function(){

delCls(list,"header__nav-item-7-show");

};

list.onmouseover = function() {

addCls(list,"header__nav-item-7-show");

};

list.onmouseout=function(){

delCls(list,"header__nav-item-7-show");

};

收起回答

提问者观鱼观猪 2019-06-14 08:23:45

CSS:

p, li { white-space: pre-wrap; }

wesoft: 2019-06-14 08:22:35

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="header__logo">慕课高铁客户服务中心 |</div>

<a href="javascript:;" class="header__nav-item header__nav-item-2">imooc@com</a>

<a href="javascript:;" class="header__nav-item-7">我的IMOOC &#9660</a>

<li><a href="javascript:;" class="">未完成订单</a></li>

<li class="showbottom"><a href="javascript:;" class="">已完成订单(改/退)</a></li>

<li><a href="javascript:;" class="">查看个人信息</a></li>

<li class="showbottom"><a href="javascript:;" class="">常用联系人</a></li>

<li><a href="javascript:;" class="">重点旅客预约</a></li>

<li class="showbottom"><a href="javascript:;" class="">遗失物品查找</a></li>

</ul>

</div>

<!-- <ul class="list">

<li><a href="javascript:;" class="">未完成订单</a></li>

<li><a href="javascript:;" class="">已完成订单(改/退)</a></li>

<li><a href="javascript:;" class="">查看个人信息</a></li>

<li><a href="javascript:;" class="">常用联系人</a></li>

<li><a href="javascript:;" class="">重点旅客预约</a></li>

<li><a href="javascript:;" class="">遗失物品查找</a></li>

</ul> -->

</nav>

</div>

</header>

</div>

</body>

</html>

wesoft: 2019-06-14 08:23:13

/* 通用 */

*{margin:0;padding:0;}

a{text-decoration:none;}

ul,li{margin:0;padding:0;list-style:none;}

li a{color:#333333;}

/* 头部 */

.header{background-color:#efefef;border-bottom:2px solid #2487c9;}

.header__wrap{width:1200px;height:124px;margin:0 auto;position:relative;}

.header__logo{width:384px;height:96px;line-height:96px;font-size:25px;color:#333333;text-indent:96px;background:url('../img/logo.png') left center no-repeat;background-size:96px 96px;position:absolute;top:50%;margin-top:-48px;left:20px;}

.header__left_service{position:absolute;width:65px;height:96px;color:#666666;font-size:16px;line-height:96px;top:50%;margin-top:-48px;left:384px;}

.header__logo,.header__left_service:hover{cursor:pointer;}

/* 导航部分 */

.header__nav{position:absolute;right:20px; /* width: 634px; */height:30px;top:50%;margin-top:-15px;}

.header__nav .header__nav-item{display:block;float:left;color:#00004a;line-height:30px;font-size:16px;}

.header__nav .header__nav-item-1{padding-left:10px;}

.header__nav .header__nav-item-2{color:#f88703;padding-left:10px;}

.header__nav .header__nav-item-3{padding-left:15px;}

.header__nav .header__nav-item-4{color:#f88703;padding-left:5px;}

.header__nav .header__nav-item-5{padding-left:5px;}

.header__nav .header__nav-item-6{padding-left:5px;}

.header__nav .header__nav-item .header__nav-item-7{display:block;padding-left:20px;color:#00004a;line-height:30px;font-size:16px;}

.header__nav .header__nav-item .header__nav-item-7:hover{color:rgb(251,116,3);}

.header__nav .header__nav-item-8{margin-left:70px;width:70px;text-indent:18px;background:url('../img/phone.png') left center no-repeat;background-size:15px 24px;}

.header__nav .header__nav-item .list{display:none;background-color:#fcfcfc;position:absolute;width:165px;border:1px solid rgb(251,116,3);margin-left:20px; /* margin-top: -30px; */ /* left: 20px; */}

.header__nav .header__nav-item .list li{height:35px;line-height:35px;margin-left:12px;margin-right:12px;padding-top:5px;}

.header__nav .header__nav-item .list li a{padding-left:10px;font-size:14px;}

.header__nav .header__nav-item .list .showbottom{border-bottom:1px dashed #333333;}

.header__nav .header__nav-item .header__nav-item-7-show{display:block;}

收起回答