鼠标经过事件无效

鼠标经过事件无效

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>display属性</title>

        <style type="text/css">

          /*样式补充*/

          div,hl,h3,li,ul{padding:0; margin:0;}

          h3{background-color:#eaeaea;

             border-bottom:1px #e5e5e5 solid;

              line-height:30px;

              font-family:"宋体";

            }

          .big{text-align:center;

               margin:0 auto; width:120px;}

          .elec{border:1px #eaeaea solid;}

          .elec li{list-style:none; color:#5C5C5C; font-size:15px; margin:5px; }

          ul{display:none;}

          .div1:hover li{display:inline-block;}

        </style>

    </head>

    <body>

    <div>

        <div>

            <h3>家电</h3>

            <ul>

                <li>冰箱</li>

                <li>洗衣机</li>

                <li>空调</li>

            </ul>

        </div>

        <div>

            <h3>洗护</h3>

            <ul>

                <li>洗衣液</li>

                <li>消毒液</li>

                <li>柔顺剂</li>

            </ul>

        </div>

        <div  class="div3">

            <h3>衣物</h3>

             <ul>

                <li>衬衫</li>

                <li>裤子</li>

                <li>卫衣</li>

            </ul>

        </div>

      </div>

</body>

</html>


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

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

1回答
小丸子爱吃菜 2017-05-20 17:11:20

因为你是跟ul设置display:none;的所以后面的鼠标经过也要将ul的diaplay设置为block。

.div1:hover ul{display:inline-block;}

祝学习愉快!

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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