CSS 實現 ： 滑鼠移動上去顯示 div,移開隱藏 div

Edcc發表於2020-02-07
CSS

下面程式碼實現的功能是，滑鼠移動過去家電，洗護，衣物，會彈出來列表

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>display屬性</title>
        <style type="text/css">
          /*樣式補充*/
          *{
              margin:0;
              padding:0;
              list-style:none;
          }
            .big{
              margin:auto;/*居中*/
              width:150px;
              height:252px;
          }
            h3{
              width:148px;
              height:38px;
              background-color:#EDEDED;
              text-align:center;
              font-size:25px;
              font-weight:400;
              line-height:38px;
          }
          ul{
              display:none;/*隱藏*/
              border:1px solid #ccc;
          }
          ul li{
              text-align:center;
              padding:5px 0 5px 0;
          }
          .div1:hover .elec{
              display:block;/*顯示*/
          }
                    .div2:hover .wash{
              display:block;
          }
                    .div3:hover .clothes{
              display:block;
          }

        </style>
    </head>
    <body>
    <div class="big">
        <div class="div1">
            <h3>家電</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣機</li>
                <li>空調</li>
            </ul>
        </div>
        <div class="div2">
            <h3>洗護</h3>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔順劑</li>
            </ul>
        </div>
        <div  class="div3">
            <h3>衣物</h3>
             <ul class="clothes">
                <li>襯衫</li>
                <li>褲子</li>
                <li>衛衣</li>
            </ul>
        </div>
      </div>
</body>
</html>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章