4-7麻烦老师帮忙提示一下

4-7麻烦老师帮忙提示一下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          body,div{margin:0px;padding:0px;font-family:"宋体";}

          ul{list-style:none;}

          .big{width:260px;background-color:#f2f4f6;border:1px #ececec ;margin:0 auto;}

          .div1 .div2 .div3{width:100%;height:50px;background-color:#040a10;text-align: center;}        

          .elec .wash .clothes{font-size:12px;} 

          li{display:none;}

          div:hover li{display:block;}

        </style>

    </head>

    <body>

    <div class="big">

        <div class="div1">

            <h3 class="content1">家电</h3>

            <ul class="elec">

                <li>冰箱</li>

                <li>洗衣机</li>

                <li>空调</li>

            </ul>

        </div>

        <div class="div2">

            <h3 class="content2">洗护</h3>

            <ul class="wash">

                <li>洗衣液</li>

                <li>消毒液</li>

                <li>柔顺剂</li>

            </ul>

        </div>

        <div  class="div3">

            <h3 class="content3">衣物</h3>

             <ul class="clothes">

                <li>衬衫</li>

                <li>裤子</li>

                <li>卫衣</li>

            </ul>

        </div>

      </div>

</body>

</html>

我没有实现最后的效果。


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

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

3回答
好帮手慕星星 2020-09-04 09:45:53

同学你好,就因为.big是外层大的div块,所有内容都在里面,所以一开始的代码移入的时候,所有li都会显示。因为代码中设置的就是移入div,后代li显示。

其实同学可以不修改为ul隐藏,li隐藏也是可以的。在移入效果前面加一个.big即可

http://img1.sycdn.imooc.com//climg/5f519c1c090a8bb302700125.jpg

这样控制的就是移入.big下div元素的时候,li显示。三个小div是分开的,移入哪个,哪个的后代li显示。

自己再理解下,祝学习愉快!

好帮手慕言 2020-09-03 17:44:39

同学你好,最外层的是div标签,如果写为div:hover li {display: block;},那么鼠标悬停在下方区域,所有的li就会显示出来

http://img1.sycdn.imooc.com//climg/5f50b9ef0961111604000145.jpg

按照上条回复中的代码,当鼠标悬停在下方区域时

http://img1.sycdn.imooc.com//climg/5f50ba720946edd503110131.jpg

家电这项里面的ul就会显示出来,洗护和衣服这两项同理。

同学可以再理解下,祝学习愉快~

  • 提问者 慕盖茨9513023 #1
    为什么.big 类悬停的区域是上面的家电一行呢?.big在程序里不是总的一个大的div块吗?
    2020-09-03 20:31:10
好帮手慕言 2020-09-02 09:57:54

同学你好,可以给ul设置display: none;当类名为big元素里的div元素hover时,ul显示出来,如下:

http://img1.sycdn.imooc.com//climg/5f4efbfc090db53403760467.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕盖茨9513023 #1
    老师,您好,我试着修改了一下代码,确实可以实现你说的效果,但是我想问下,我原来的代码哪里有错误?感觉逻辑上也是可以说通的,但是实现结果不太一样。
    2020-09-03 16:36:55
  • 提问者 慕盖茨9513023 #2
    老师您能帮忙理一下这块ul,li的思路吗?
    2020-09-03 16:37:22
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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