div上加hover效果不对
<div class="ui-details-title">内科</div>
<div class="ui-details-des">高血压 冠心病</div>
<div class="des-menu-box">
<div class="des-menu">
<div class="des-menu-caption">
内科
</div>
<div class="des-menu-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="des-menu">
<div class="des-menu-caption">
内科常见
</div>
<div class="des-menu-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
</div><!--des-menu-box结束-->
</div>
.des-menu-box{
width: 500px;
height: 392px;
padding: 20px 10px 10px 29px;
position: absolute;
top: 36px;
left: 190px;
background-color: #fff;
z-index: 2;
color: #333;
/*display: none;*/
}
.ui-details{
width: 174px;
height: 38px;
padding: 0 8px;
line-height: 38px;
}
.ui-details img{
width: 22px;
height: 22px;
float: left;
margin: 8px 8px 8px 0;
}
.ui-details-title{
float: left;
}
.ui-details-des{
color: #d7f3ff;
font-size: 12px;
position: absolute;
right: 8px;
}
.des-menu-box:hover{
background-color: #fff;
}
.ui-details:hover .ui-details-title{
color: #333;
}
.ui-details:hover .ui-details-des{
color: #999;
}
.ui-details:hover .des-menu-box{
display: block;
}上面是主要的html代码和css代码，我写出来的效果为什么是hover在右边的子菜单上时左边的会发生变化，而如果隐藏右边子菜单项，左边的hover上去没效果？
0
收起
正在回答 回答被采纳积分+1
4回答
qq_西毒_iyFWY2
2019-06-09 20:24:33
/* nav模块 */
.nav{
color: #fff;
font-size: 16px;
line-height: 36px;
position: relative;
}
.nav .all{
width: 190px;
height: 458px;
background-color: #1fa4f0;
position: absolute;
top: 0;
font-size: 14px;
}
.nav .all .title{
font-size: 16px;
height: 36px;
line-height: 36px;
text-align: center;
}
/* nav全部科室模块 */
.des-menu-box{
width: 500px;
height: 392px;
padding: 20px 10px 10px 29px;
position: absolute;
top: 36px;
left: 190px;
background-color: #fff;
z-index: 2;
color: #333;
/*display: none;*/
}
.ui-details{
width: 174px;
height: 38px;
padding: 0 8px;
line-height: 38px;
}
.ui-details img{
width: 22px;
height: 22px;
float: left;
margin: 8px 8px 8px 0;
}
.ui-details-title{
float: left;
}
.ui-details-des{
color: #d7f3ff;
font-size: 12px;
position: absolute;
right: 8px;
}
.des-menu-box:hover{
background-color: #fff;
}
.ui-details:hover .ui-details-title{
color: #333;
}
.ui-details:hover .ui-details-des{
color: #999;
}
.ui-details:hover .des-menu-box{
display: block;
}
.nav ul{
float: left;
padding-left: 198px;
}
.nav ul li a{
color: #fff;
}
.nav ul li{
float: left;
list-style: none;
margin: 0 15px;
}
.nav .famous{
float: right;
}
/* banner */
.banner-slider{
position: relative;
}
.banner-slider .checked{
display: block;
}
.banner-slider img{
position: absolute;
top: 0;
left: 0;
display: none;
}
.banner-search .caption,
.banner-help .caption
{
height: 23px;
text-align: center;
line-height: 23px;
padding: 15px 0 13px 0;
font-size: 16px;
color: #fecd09;
}
.banner-search .caption span{
display: inline-block;
padding-left: 26px;
background: url(../images/icon-help.png) no-repeat 0 2px;
}
.banner-search .options-list{
width: 170px;
height: 150px;
margin: 0 auto;
}
.banner-search .options-list .option select{
width: 100%;
height: 26px;
margin-bottom: 10px;
border-radius: 4px;
}
.banner-search .submit{
width: 108px;
height: 36px;
margin: 0 auto;
}
.banner-search .submit input{
display: block;
background-color: #fecd09;
width: 100%;
height: 100%;
border: none;
font-size: 14px;
color: #fff;
border-radius: 4px;
line-height: 100%;
text-align: center;
}
.banner-help .caption span{
display: inline-block;
padding-left: 26px;
height: 46px;
color: #1fa4f0;
background: url(../images/icon-help.png) no-repeat 0 -22px;
}
.banner-help .help-list{
padding: 0 26px;
margin: 0 auto;
color: #1fa4f0;
font-size: 14px;
}
.banner-help .help-list .help-text{
width: 86px;
height: 26px;
line-height: 26px;
text-align: center;
margin: 0 10px 8px 0;
float: left;
}由于超过字数限制，所以css代码放在这里，以上为nav和banner模块css代码
qq_西毒_iyFWY2
2019-06-09 20:21:00
<div id="nav" class="nav"> <div class="wrap"> <div class="all"> <div class="title">全部科室</div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_02.png"> <div class="ui-details-title">内科</div> <div class="ui-details-des">高血压 冠心病</div> <div class="des-menu-box"> <div class="des-menu"> <div class="des-menu-caption"> 内科 </div> <div class="des-menu-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> <div class="des-menu"> <div class="des-menu-caption"> 内科常见 </div> <div class="des-menu-list"> <a href="#1">心脑血管科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">心血管内科</a> <a href="#1">神经内科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> <a href="#1">内分泌科</a> <a href="#1">血液科</a> </div> </div> </div><!--des-menu-box结束--> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_03.png"> <div class="ui-details-title">外科</div> <div class="ui-details-des">肾结石 脑外科</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_04.png"> <div class="ui-details-title">妇产科</div> <div class="ui-details-des">阴道炎 不孕不育</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_05.png"> <div class="ui-details-title">生殖中心</div> <div class="ui-details-des">男性不育</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_06.png"> <div class="ui-details-title">儿科</div> <div class="ui-details-des">抽动症 小儿感冒</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_07.png"> <div class="ui-details-title">骨外科</div> <div class="ui-details-des">关节炎 骨折</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_08.png"> <div class="ui-details-title">眼科</div> <div class="ui-details-des">近视 白内障</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_09.png"> <div class="ui-details-title">口腔科</div> <div class="ui-details-des">口腔修复 牙痛</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_10.png"> <div class="ui-details-title">耳鼻咽喉头颈科</div> <div class="ui-details-des">鼻炎</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_11.png"> <div class="ui-details-title">肿瘤科</div> <div class="ui-details-des">癌痛</div> </div> <div class="ui-details"> <img src="images/icon-menu/icon-menu_30.png"> <div class="ui-details-title">其他科室</div> </div> </div> <ul> <li><a href="#">按医院挂号</a></li> <li><a href="#">按科室挂号</a></li> <li><a href="#">按疾病挂号</a></li> <li><a href="#">最新公告</a></li> <li><a href="#">社会知名医院</a></li> </ul> <!--<div class="famous">社会知名医院</div>--> </div> </div> <div class="wrap"> <div id="banner" class="banner"> <div class="banner-slider"> <img src="images/banner_1.jpg" class="checked"> <img src="images/banner_2.jpg"> <img src="images/banner_3.jpg"> </div> <div class="banner-search"> <div class="caption"><span>快速预约</span></div> <div class="options-list"> <div class="option"> <select name="area"><option>医院地区</option></select> </div> <div class="option"> <select name="level"><option>医院等级</option></select> </div> <div class="option"> <select name="name"><option>医院名称</option></select> </div> <div class="option"> <select name="department"><option>医院科室</option></select> </div> </div> <div class="submit"> <input type="button" name="btn" value="快速查询"> </div> </div> <div class="banner-help"> <div class="caption"><span>帮助中心</span></div> <div class="help-list"> <div class="help-text">账号指南</div> <div class="help-text">预约指南</div> <div class="help-text">账号找回</div> <div class="help-text">常见问题</div> </div> </div> </div> </div>
以上是整个nav和banner模块的代码
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星