关于hover
来源：5-3 首页.UI组件-UiMenu
好狗边上飘314
2020-02-05 22:58:27
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>城市医院预约平台</title> <link rel="stylesheet" type="text/css" href="css/layout.css"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/ui.css"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> </head> <body> <div id="top" class="top"> <div class="wrap"> <p class="call">010-114/116114电话预约</p> <p class="welcome">欢迎来到城市预约挂号统一平台 请 <a href="#">登录</a> <a href="#">注册</a> <a href="#">帮助中心</a> </p> </div> </div> <div id="header" class="header"> <div class="wrap clearfix"> <a href="#" class="logo"> <img src="img/logo.png"> </a> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#">科室</a> <a href="#">疾病</a> <a href="#">医院</a> </div> <input type="text" class="ui-search-input" placeholder="请输入搜索内容"><a href="#" class="ui-search-submit"> </a> </div> </div> </div> <div id="nav" class="nav"> <div class="wrap"> <div class="link menu">全部科室 <div class="menu-list ui-menu"> <div class="ui-menu-item"> <a href="#" class="ui-menu-item-deparment">内科</a> <a href="#" class="ui-menu-item-disease">高血压</a> <a href="#" class="ui-menu-item-disease">冠心病</a> </div> <div class="ui-menu-item-detail"> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科 </div> <div class="ui-menu-item-details-group-list"> <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> </div> </div> <div class="ui-menu-item-detail-group"> <div class="ui-menu-item-detail-group-caption"> 内科常见疾病 </div> <div class="ui-menu-item-details-group-list"> <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> </div> </div> </div> </div> </div> <a href="#" class="link">按医院挂号</a> <a href="#" class="link">按科室挂号</a> <a href="#" class="link">按疾病挂号</a> <a href="#" class="link">最新公告</a> <a href="#" class="link right">社会知名医院</a> </div> </div> <div id="banner" class="banner"> <div class="banner-slider"></div> <div class="banner-search"> <div class="caption"><span class="text">快速预约</span></div> <div class="form"> <div class="line"><select name="area"><option>医院等级</option></select></div> <div class="line"><select name="level"><option>医院地区</option></select></div> <div class="line"><select name="name"><option>医院名称</option></select></div> <div class="line"><select name="department"><option>医院科室</option></select></div> </div> <div class="submit"> <input type="button" class="button" value="快速查询"> </div> </div> <div class="banner-help"> <div class="caption"><span class="text">帮助中心</span></div> <div class="list"> <a href="#" class="link">账号指南</a> <a href="#" class="link">预约指南</a> <a href="#" class="link">账号找回</a> <a href="#" class="link">常见问题</a> </div> </div> </div> <div id="content" class="content clearfix"> <div class="wrap"> <div class="content-tab"> <div class="caption"> <a href="#" class="item item_focus">医院</a> <a href="#" class="item ">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="#" class="block-caption-item block-caption-item_focus">全部</a> <a href="#" class="block-caption-item">东城区</a> <a href="#" class="block-caption-item">西城区</a> <a href="#" class="block-caption-item">朝阳区</a> <a href="#" class="block-caption-item">丰台区</a> <a href="#" class="block-caption-item">石景山区</a> <a href="#" class="block-caption-item">海淀区</a> <a href="#" class="block-caption-item">门头沟区</a> <a href="#" class="block-caption-item">房山区</a> <a href="#" class="block-caption-item">其它</a> </div> <div class="block-content"> <div class="block-list clearfix"> <div class="item"> <img src="img/hospital-1.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div> <div class="item-phone">电话：东院咨询台：010-69155564...</div> <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div> </div> <div class="item"> <img src="img/hospital-2.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div> <div class="item-phone">电话：东院咨询台：010-69155564...</div> <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div> </div> <div class="item"> <img src="img/hospital-3.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div> <div class="item-phone">电话：东院咨询台：010-69155564...</div> <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div> </div> <div class="item"> <img src="img/hospital-4.jpg" alt="xx医院"> <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div> <div class="item-phone">电话：东院咨询台：010-69155564...</div> <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div> </div> </div> <div class="block-text-list clearfix"> <a href="#" class="item">中国医学科学院肿瘤医院<span class="level">【三甲医院】</span></a> <a href="#" class="item">中国医学科学院肿瘤医院<span class="level">【三甲医院】</span></a> <a href="#" class="item">中国医学科学院肿瘤医院<span class="level">【三甲医院】</span></a> <a href="#" class="item">中国医学科学院肿瘤医院<span class="level">【三甲医院】</span></a> <a href="#" class="item">中国医学科学院肿瘤医院<span class="level">【三甲医院】</span></a> <a href="#" class="item">中国医学科学院肿瘤医院<span class="level">【三甲医院】</span></a> </div> <a href="#" class="block-more">更多医院</a> </div> </div> <div class="item" style="display:none"> 科室内容 </div> </div> </div> <div class="content-news"> <div class="caption">最新公告<a href="#" class="more">| 更多</a></div> <div class="list"> <a href="#" class="link">阜外医院特需门诊暂停更新号源通...</a> <a href="#" class="link">中国联合网络通信有限公司北京市</a> <a href="#" class="link">防护策略升级通知</a> <a href="#" class="link">首都儿科研究所附属儿童医院暂停...</a> <a href="#" class="link">首都医科大学附属复兴医院门诊...</a> <a href="#" class="link">北京燕化医院暂停更新号源通知</a> </div> </div> <div class="content-close"> <div class="caption">停诊公告<a href="#" class="more">| 更多</a></div> <div class="list"> <a href="#" class="link">民航总医院呼吸内科停诊公告</a> <a href="#" class="link">解放军307医院淋巴肿瘤内科停...</a> <a href="#" class="link">北京市延庆医院神经内科门诊停...</a> <a href="#" class="link">空军总医院皮肤科门诊停诊公告</a> <a href="#" class="link">北京市门头沟区医院骨外门诊停诊...</a> <a href="#" class="link">北京军区总医院血管外科门诊停诊...</a> </div> </div> </div> </div> <div id="footer" class="footer"> Copyright © 2020慕课网版权所有 </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
body{
margin:0;
padding:0;
}
.clearfix:after{
content:'';
display:block;
height:0;
line-height:0;
clear:both;
zoom:1;
}
.wrap{
width:1000px;
margin:0 auto;
position:relative;
}
.top{
height:30px;
background:#f5f5f5;
}
.header{
height:92px;
}
.nav{
height:36px;
background:#60bff2;
}
.banner{
width:802px;
margin:0 auto;
height:414px;
padding:9px 0 0 198px;
}
.banner-slider{
float:left;
width:544px;
height:414px;
background-color:#8edff3;
}
.banner-search{
float:right;
width:250px;
height:255px;
background-color:#eee;
}
.banner-help{
float:right;
width:250px;
height:146px;
background-color:#ccc;
margin-top:12px;
}
.content{
padding:10px 0 38px 0;
/*overflow:hidden;*/
}
.content-tab{
float:left;
width:742px;
height:490px;
background-color:#eee;
}
.content-news,
.content-close{
float:right;
width:248px;
height:236px;
border:1px solid #ccc;
}
.content-close{
margin-top:12px;
border-color:red;
}
.footer{
height:70px;
padding:25px 0;
background-color:#eceef2;
}p{
padding:0;
margin:0;
display:inline-block;
}
a{
text-decoration:none;
}
select,input{
border:none;
outline:none;
}
/*#top模块内样式*/
.top{
line-height:30px;
font-size:13px;
color:#868686;
}
.top .call{
float:left;
padding-left:20px;
background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{
float:right;
}
.top a{
color:#2da5e1;
padding-left:10px;
}
/*#header模块内部样式*/
.header .logo{
width:402px;
height:74px;
padding:9px 0;
display:inline-block;
}
.header .logo img{
width:100%;
height:100%;
}
.header .search{
width:326px;
height:38px;
position:absolute;
right:0;
top:29px;
/*background-color:orange;*/
}
/*#nav 模块内部样式*/
.nav .link{
display:inline-block;
float:left;
padding-left:30px;
line-height:36px;
min-width:80px;
color:#fff;
font-size:16px;
text-align:center;
}
.nav a:hover{
color:#d7f3ff;
}
.nav .menu{
width:130px;
padding-right:30px;
background-color:#1fa4f0;
position:relative;
}
.nav .menu .menu-list{
width:100%;
height:423px;
position:absolute;
background-color:#1fa4f0;
left:0px;
top:36px;
}
/*#banner 模块内部样式*/
.banner-search{
background-color:#fafafa;
}
.banner-help .caption,
.banner-search .caption{
height:22px;
padding:15px 0 15px 0;
text-align:center;
}
.banner-help .caption .text,
.banner-search .caption .text{
display:inline-block;
height:22px;
line-height:22px;
padding-left:28px;
color:#fec009;
font-size:16px;
background:url(../img/icon-help.png) no-repeat 0 0;
}
.banner-search .form{
height:150px;
}
.banner-search .form .line{
padding-bottom:9px;
text-align:center;
}
.banner-search .form .line select{
width:170px;
font-size:12px;
height:26px;
border:1px solid #dcdddd;
z-index:0;
line-height:26px;
padding:2px 0;
color:#666;
/*outline:none;*/
}
.banner-search .submit{
height:32px;
text-align:center;
}
.banner-search .submit .button{
width:108px;
height:33px;
background-color:#fecd09;
font-size:14px;
color:#fff;
border-radius:3px;
}
.banner-help{
background-color:#fafafa
}
.banner-help .caption .text{
color:#00b3ea;
background:url(../img/icon-help.png) no-repeat 0 -23px;
}
.banner-help .link{
width:86px;
height:26px;
line-height:26px;
font-size:14px;
padding:0 0 8px 26px;
text-align:center;
color:#00b3ea;
display:inline-block;
}
/*#content 模块内部样式*/
.content-news{
background-color:#fff;
border:1px solid #f4f6fa;
}
.content-close .caption,
.content-news .caption{
height:38px;
line-height:38px;
background-color:#f4f6fa;
color:#fec009;
text-indent:20px;
font-size:15px;
}
.content-close .caption .more,
.content-news .caption .more{
color:#868686;
float:right;
padding-right:22px;
font-size:12px;
}
.content-close .list,
.content-news .list{
padding:15px 20px 13px 35px;
line-height:29px;
background:url(../img/list-yellow.jpg) no-repeat 17px 20px;
font-size:12px;
}
.content-close .list .link,
.content-news .list .link{
display:block;
color:#969696;
}
.content-close{
background-color:#fff;
border:1px solid #f4f6fa;
}
.content-close .caption{
color:#4ab4ed;
}
.content-close .list{
background:url(../img/list-blue.jpg) no-repeat 17px 20px;
}
.content-tab{
background:none;
}
.content-tab .caption {
height:34px;
line-height:34px;
background-color:#f5f6fa;
}
.content-tab .caption .item{
display:block;
width:112px;
height:34px;
color:#00b3ea;
font-size:14px;
text-align:center;
float:left;
}
.content-tab .caption .item_focus{
color:#fff;
background-color:#60bff2;
}
.content-tab .block{
height:452px;
border:1px solid #f4f5fa;
}
.content-tab .block-caption{
height:26px;
line-height:26px;
padding:8px;
border-bottom:1px solid #f4f5fa;
}
.content-tab .block-caption-item{
display:block;
float:left;
padding:0 10px;
color:#4c4948;
font-size:12px;
}
.content-tab .block-caption-item_focus{
color:#fff;
background-color:#60bff2;
}
.content-tab .block-content{
padding:16px 12px;
}
.content-tab .block-content .block-more{
display:block;
color:#5084c4;
font-size:14px;
text-align:center;
line-height:55px;
}
/*医院列表容器*/
.content-tab .block-content .block-list {}
.content-tab .block-content .block-list .item{
width:216px;
height:102px;
float:left;
padding:0 20px 10px 120px;
position:relative;
font-size:12px;
}
.content-tab .block-content .block-list .item img{
width:110px;
height:98px;
position:absolute;
left:0;
top:0;
}
.content-tab .block-content .block-list .item-name{
color:#036eb7;
font-size:14px;
padding-top:13px;
line-height:21px;
}
.content-tab .block-content .block-list .item-level{
float:right;
color:#979797;
font-size:12px;
}
.content-tab .block-content .block-list .item-phone,
.content-tab .block-content .block-list .item-address{
line-height:18px;
padding-bottom:4px;
color:#666;
}
/*医院文案列表容器*/
.content-tab .block-content .block-text-list {}
.content-tab .block-content .block-text-list .item{
width:351px;
height:27px;
font-size:14px;
color:#666;
padding-top:8px;
display:block;
float:left;
border-bottom:1px dashed #dcdddd;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
margin-left:13px;
}
.footer{
line-height:70px;
color:#666;
text-align:center;
font-size:12px;
}.ui-search{
background:url(../img/ui-search.jpg) center no-repeat;
font-size:14px;
color:#fff;
position:relative;
}
.ui-search-selected{
width:70px;
line-height:38px;
height:38px;
position:absolute;
top:0;
left:0;
text-indent:14px;
}
.ui-search-select-list{
position:absolute;
width:67px;
line-height:24px;
background-color:#fff;
box-shadow:3px 3px 5px rgba(0,0,0,.2);
left:2px;
top:36px;
z-index:5;
display:none;
}
.ui-search-select-list a{
display:block;
text-align:center;
color:#a5a2a2;
font-size:12px;
}
.ui-search-select-list a:hover{
background-color:#ebeef5;
}
.ui-search-input{
position:absolute;
left:73px;
top:5px;
width:208px;
height:26px;
line-height:26px;
font-size:13px;
color:#a5a2a2;
}
.ui-search-submit{
/*display:block;*/
position:absolute;
right:0;
top:1px;
width:40px;
height:36px;
}
/*ui-menu分类菜单*/
.ui-menu-item{
height:22px;
line-height:22px;
padding:8px 5px 9px 6px;
margin-left:2px;
}
.ui-menu-item:hover{
background-color:#fff;
}
.ui-menu-item-deparment{
float:left;
height:22px;
line-height:22px;
position:relative;
padding-left:30px;
font-size:14px;
color:#fff;
}
.ui-menu-item .ui-menu-item-deparment:before{
content:'';
width:22px;
height:21px;
display:block;
position:absolute;
left:0;
top:1px;
background:url('../img/icon-menu.jpg') -22px 0 no-repeat;
}
.ui-menu-item-disease{
font-size:12px;
padding-left:5px;
float:right;
color:#d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-deparment:before{
background-position:0 0;
}
.ui-menu-item:hover .ui-menu-item-deparment{
color:#333;
}
.ui-menu-item:hover .ui-menu-item-disease{
color:#868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display:block;
}
.ui-menu-item-detail{
display:none;
position:absolute;
width:500px;
height:392px;
padding:20px 10px 10px 29px;
background:#fff url(../img/bg-menu.jpg) center no-repeat;
top:0;
left:190px;
box-shadow:5px 5px 2px rgba(0,0,0,.1);
}
.ui-menu-item-detail-group{
padding-bottom:20px;
text-align:left;
}
.ui-menu-item-detail-group-caption{
width:100%;
height:34px;
display:block;
line-height:34px;
color:#666;
font-size:16px;
font-weight:bold;
}
.ui-menu-item-details-group-list{
line-height:23px;
}
.ui-menu-item-details-group-list a{
display:inline-block;
color:#868686;
margin-right:8px;
font-size:12px;
padding-bottom:12px;
}
.ui-menu-item-details-group-list a:after{
content:' |';
color:#eee;
padding-left:10px;
}
老师帮忙看一下是什么原因导致的，为什么当.ui-menu-item-detail下的display:block;为非注释状态；光标滑动到.ui-menu-item上面.ui-menu-item-detail却显示不出来。。。
写回答
2回答
-
好帮手慕糖
2020-02-06
同学你好，因为.ui-menu-item-detail不是.ui-menu-item的子元素，所以直接设置的hover没生效。建议：可以调整下html结构，将.ui-menu-item的div结束标签放在.ui-menu-item-detail结束的下面，包裹住该元素，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0 -
好狗边上飘314
提问者
2020-02-06
不用回复了老师，是层级设置的有问题，div的结束标签放错位置了
0
相似问题