div上加hover效果不对

<div class="ui-details-title">内科</div>

                    <div class="ui-details-des">高血压&nbsp;&nbsp;冠心病</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上去没效果？

qq_西毒_iyFWY2 2019-06-09

源自：实战：挂号平台首页 5-3 首页.UI组件-UiMenu

0

收起

4回答

好帮手慕星星 2019-06-10 09:56:31

你好，首先需要将子菜单隐藏，然后鼠标移入的时候才能显示出来，参考如下修改：

效果：

自己可以测试下，如果还有问题可以继续提问。

祝学习愉快！

提问者 qq_西毒_iyFWY2 #1

...没有效果，我之前就写了display:none的。我依然是鼠标hover内科区域，字体颜色、内科项背景颜色都不会改变以及子菜单也不会显示。但取消子菜单的display:none之后，我用鼠标hover子菜单区域，内科项的字体颜色和背景颜色都可以变化。

2019-06-11 15:35:30
好帮手慕星星回复提问者 qq_西毒_iyFWY2 #2

你好，这边按照之前回复的进行修改之后效果没有问题，如果同学测试还有问题的话，可以将自己修改之后的代码粘贴上来，老师帮助你测试下。

2019-06-11 18:03:04

提问者 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">高血压&nbsp;&nbsp;冠心病</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">肾结石&nbsp;&nbsp;脑外科</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">阴道炎&nbsp;&nbsp;不孕不育</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">抽动症&nbsp;&nbsp;小儿感冒</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">关节炎&nbsp;&nbsp;骨折</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">近视&nbsp;&nbsp;白内障</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">口腔修复&nbsp;&nbsp;牙痛</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模块的代码

好帮手慕星星 2019-06-09 19:15:35

你好，html结构是不全的，没有测试出同学说的效果。

建议将html和css自己先测试一下，然后再粘贴上来，便于准确定位问题所在，并且将效果说的具体一些，老师帮助你解决。

祝学习愉快！

提问者 qq_西毒_iyFWY2 #1

已粘贴完整代码，html和css代码分两次回答粘贴，并附上效果图和问题描述，请老师测试。

2019-06-09 20:25:49

相似问题

老师，怎么效果实现不了呢

div加上hover之后效果没出来

为什么h2:hover 不生效 ul:hover 才会生效？

老师，为什么hover失效了呢？

提问为什么hover不生效

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

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号