给对方li的hot设置了hover,第一个menu设置显示,没有出效果,哪里出问题了

给对方li的hot设置了hover,第一个menu设置显示,没有出效果,哪里出问题了

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        li{

            list-style: none;

        }

        .banner-nav .menus-box .menu{


    position: absolute;


    left: 296px;


    top: 0;


    width: 356px;


    height: 100%;


    background-color: rgba(0,0,0,0.63);


    color: white;


    padding: 16px;


    box-sizing: border-box;


    display: none;


}


.banner-nav .menus-box .menu a{


color: white;


}


.banner-nav .menus-box .menu dl{


margin-bottom: 16px;


}


.banner-nav .menus-box .menu dl dt{


line-height: 30px;


font-size: 18px;


}


.banner-nav .menus-box .menu dl dd{


line-height: 22px;


font-size: 15px;


}


.banner-nav>ul>li.hot:hover .menus-box .menu:first-child{


display: block;


}

</style>

</head>

<body>

        <div class="center-wrap">

            <nav class="banner-nav">

                <ul>

                    <li class="hot">

                        <dl>

                            <dt>热门出发地</dt>

                            <dd>

                                <em>北京</em>

                                <em>上海</em>

                                <em>广深</em>

                                <em>西南</em>

                                <em>国内其他</em>

                            </dd>

                        </dl>

                    </li>

                </ul>

<div class="menus-box">


                    <div class="menu" data-t="hot">


                        <dl>


                            <dt>港澳台</dt>


                            <dd>


                                <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="">澳门豪华自助 台北101</a>


                                <a href="">台湾美食</a>


                            </dd>


                        </dl>

                        </div>

</div>

        </nav>

        </div>

</body>

</html>


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

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2023-08-07 09:41:08

同学你好,鼠标移入是,css选择器与html结构不对应,所以没有效果。如下选择器:

https://img1.sycdn.imooc.com//climg/64d04b0909b886f407900112.jpg

选择器中,li.hot与.menus-box .menu:first-child是父子关系。

而html中,二者不是父子关系:

https://img1.sycdn.imooc.com//climg/64d04b670960991d08860349.jpg

所以css样式不会生效。

该题,需要调整html结构,让menu和li形成父子关系,同学再试试。或者看看社区中,其他人的思路,参考一下:

https://img1.sycdn.imooc.com//climg/64d04bae09fd576018620989.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师