为什么把鼠标移入ui-search-select-list里面第二背景没有发生改变，点击ui-search-select-list不会隐藏

<!doctype html>

<head>

<style>

padding:0;

margin:0;

border:0;

}

/*此处填写css样式*/

body{

margin:0;

padding:0;

}

.wrap{

width:1000px;

margin:0 auto;

position:relative;

}

.top{

background:#f5f5f5;

color:#868686;

font-size:13px;

line-height: 50px;;

height:50px;

}

margin:0;

padding:0;

display:inline-block;

}

.call{

background:url(http://img1.sycdn.imooc.com/climg//58c61b9d0001e02d00170017.png)no-repeat center left;

float:left;

padding-left: 30px;;

}

.top .welcome{

float:right;

}

.top a{

color:#2da5e1;

}

text-decoration: none;

}

.header{

height:92px;

}

.clearfix{

content:"";

height:0;

zoom: 1;

display:block;

clear: both;

}

.logo{

display:block;

width:402px;

height:72px;

padding:9px 0;

}

.logo img{

width:100%;

height:100%;

}

.search{

position:absolute;

background:url(http://img1.sycdn.imooc.com/climg//58c61b7e00012b9303260038.jpg) no-repeat center;

width:326px;

height:50px;

right:0px;

top:29px;

}

.search .ui-search-select{

display: inline-block;

position:absolute;

left:12px;

top:12px;

color:#fff;

}

.search .ui-search-select-list a{

display:block;

color:#A5a2a2;

padding-top: 5px;;

}

.search .ui-search-select-list a:hover{

background-color:#ebeef5;

}

.search .ui-search-select-list {

display:none;

position:absolute;

left:0px;

top:44px;

background:#fff;

width:60px;

text-align: center;

height:80px;

box-shadow: 3px 3px 5px rgba(0,0,0,0.2);

}

.search .ui-search-input{

display: block;

position: absolute;

top:22px;

left:115px;

}

.nav{

background:#60bff2;

height:36px;

}

.nav .link{

line-height: 36px;

padding-right: 30px;

color:#fff;

}

.nav .right{

padding-left:260px ;

}

.content-nav .logo1 img{

width:100px;

height:40px;

position: absolute;

top:20px;

left:50px;

z-index:0;

}

.content-nav .link1{

position: absolute;

left:65px;

top:20px;

display:block;

z-index:1;

color:#fff;

line-height: 40px;

}

.link-wrap{

height:90px;

width:1000px;

border: 1px solid rgb(241, 234, 234);

border-top:3px solid #60bff2;

position: absolute;

top:60px;

left:50px;

}

.content-nav .link{

display:inline-block;

width:100px;

padding-right:12px;

font-size:15px;

color: #666;

}

.content-nav .link2{

position: absolute;

top:30px;

right:50px;

}

.content-nav .link-wrap .wrap1{

margin:7px 0 0 15px;

width:700px;

}

.content-tab{

position: absolute;

left:159px;

top:357px;

height:270px;

width:300px;

border: 1px #dddddd solid;

}

.content-tab .list-item{

width:200px;

height: 30px;

position: relative;

top:10px;

}

.content-tab i{

position: absolute;

top:5px;

left:8px;

width:20px;

height:25px;

display: inline-block;

background: url(http://img1.sycdn.imooc.com/climg//58c61b610001c58300440638.jpg) 0 0 no-repeat ;

}

.content-tab a{

position: absolute;

top:5px;

left:28px;

color: #666;

}

.content-tab a:after{

content:'>';

font-size:20px;

position: absolute;

left:238px;

top:-5;

}

.content-tab .i1{

background-position: 0px -21px;

}

.content-tab .i2{

background-position: 0px -43px;

}.content-tab .i3{

background-position: 0px -65px;

}

.content-tab .i4{

background-position: 0px -87px;

}

.content-tab .i5{

background-position: 0px -109px;

}

.content-tab .i6{

background-position: 0px -131px;

}

.content-tab .i7{

background-position: 0px -153px;

}

.content-item{

width:700px;

border:1px #dddddd solid;

position:relative;

left:480px;

right:20px;

top:180px;

}

.lista{

display:block;

padding: 30px 0 10px 20px;

}

.content-item .content-list-item{

padding-bottom: 20px;

width:660px;

border-top:1px #dddddd dashed;

margin: 0 auto;

}

.content-item .content-list-item a{

display:inline-block;

width:80px;

padding:20px 0 0 30px;

color:#666;

font-size:14px;

}

footer{

position: relative;

top:220px;

background: #666;

width:100%;

height:80px;

text-align: center;

}

footer p{

line-height: 80px;

font-size: 18px;

color:#868686

}

</style>

</head>

<body>

<p class="welcome">欢迎来到城市预约统一挂号平台  请

</p>

</div>

</div>

</div>

<a href="#" class="link">按医院挂号</a>

<a href="#" class="link">按科室挂号</a>

<a href="#" class="link">按疾病挂号</a>

<a href="#" class="link right">社会知名医院</a>

</div>

<a href="#"class="link">肿瘤综合科</a>

</div>

<i></i>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

<a href="#">心血管内科</a>

<a href="#">过敏反应科</a>

</div>

</footer>

//此处填写jQuery代码

$(function(){

$('.ui-search-select').on('click',function(){

$('.ui-search-select-list').show();

return false;

});

//为什么这里没有执行

$('body').on('cilck',function(){

$('.ui-search-select-list').hide();

});

$('.ui-search-select-list a ').on('cilck',function(){

$('.ui-search-select').text($(this).text());

$('.ui-search-select-list').hide();

return false;

})

</script>

</body>

</html>

慕仰8079247 2022-01-08

源自：实战：挂号平台首页 5-11 编程练习

收起

1回答

好帮手慕慕子 2022-01-09 11:01:37

同学你好，对于你的问题解答如下：

1、因为下拉列表中的第二项内容显示层级低于后面的nav元素，鼠标无法移入该选项，所以背景不会发生改变，如下图所示：

建议：给search添加z-index属性，提升显示层级，如下：

2、因为click单词拼写错了，建议修改：

祝学习愉快~

收起回答

提问者慕仰8079247 #1

这里绝对定位用多了有没有问题

2022-01-09 11:13:45
好帮手慕慕子回复提问者慕仰8079247 #2

目前是没有问题的，实际开发中就是需要结合实际需求，灵活应用所学知识去实现效果的。祝学习愉快~

2022-01-09 11:19:07

相似问题

点一下下拉箭头，出现select-list；那再点一下下拉箭头，select-list不会收起嘛？

ui-search定义

ui的作用是？

显示与隐藏

老师，这个地方把position为1的item背景变成了红色

登录后可查看更多问答，登录/注册

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

为什么把鼠标移入ui-search-select-list里面第二背景没有发生改变，点击ui-search-select-list不会隐藏

为什么把鼠标移入ui-search-select-list里面第二背景没有发生改变，点击ui-search-select-list不会隐藏

正在回答回答被采纳积分+1

请选择置顶位置