H5C3练习心得 12.17（小米商城下拉二级菜单）--hover,display

瑶瑶南波万

已于 2023-12-17 19:46:16 修改

阅读量531

点赞数 10

文章标签： html css 前端

于 2023-12-17 19:39:00 首次发布

本文链接：https://blog.csdn.net/yaoya_yaoya/article/details/135047062

版权

（一）hover的用法

用法一：

A：hover{
    color:red;
}

（最基础的方法）改变A元素的样式

用法二：

A：hover B {
    color:red;
}

鼠标悬停在A元素时,改变A元素的子元素B元素的样式

用法三：

A:hover + B {
    color:red;
}

鼠标悬停在A元素时，改变与A相邻的兄弟元素B元素的样式（B必须与A相邻）

用法四：

A:hover ~ B {
    color:red;
}

鼠标悬停在A元素时，改变A的指定兄弟元素B的样式（AB可以不相邻，但B必须在A之后）

（二）display:none;

display:none;可以将元素暂时隐藏，隐藏后不占据空间

可以通过修改元素属性display:block显示

（三）实现下拉菜单

我们首先将下拉菜单的样式设置为display: none，这样就可以隐藏下拉菜单。然后，当鼠标悬停在下拉菜单所在的元素上时，我们使用hover选择器来将下拉菜单的样式设置为display: block，这样就可以显示下拉菜单了

示例：

.container ul li div {
      width: 120px;
      position: absolute;
      top: 80px;     
      color: white;
      background-color:rgb(253,106,136) ;
      display: none;
    }
    .container ul li div p {
      display: block;
      height: 50px;
      width: 100%;
    }
    .container ul li div p:hover {
      background-color: rgb(238,77,117);
    }
    .container ul li:hover div {
      display: block;
    }

我先开始将div设置成了display:none;然后当鼠标悬停在li上的时候,div设置成display:block;实现了下拉菜单。

以下是我做小米商城下拉二级菜单的代码，大家有需要的可以运行运行，琢磨琢磨

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城下拉二级菜单</title>
  <style>
    body,
    .container,
    ul,
    p {
      margin: 0px;
      padding: 0px;
    }
    .container {
      width: 100%;
      height: 80px;
      background-color:rgb(253,106,136) ;
      position: fixed;
      top:0;
    }
    .container ul li {
      height: 80px;
      width: 120px;
      display: inline-block;
      position: relative;
      top:0;
      left:0;
      margin-left: 30px;    
      text-align: center;  
    }
    .container ul li:first-child {
      margin-left: 280px;
    }
    .container ul li a span {
      display: block;
      height: 30px;
    }
    .container ul li a p {
      display: inline;      
    }

    .container ul li a {
      text-decoration: none;
      color: white;
    }
    .container ul li:hover {
      background-color: rgb(238,77,117);
    }
    .container ul li div {
      width: 120px;
      position: absolute;
      top: 80px;     
      color: white;
      background-color:rgb(253,106,136) ;
      display: none;
    }
    .container ul li div p {
      display: block;
      height: 50px;
      width: 100%;
    }
    .container ul li div p:hover {
      background-color: rgb(238,77,117);
    }
    .container ul li:hover div {
      display: block;
    }

  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <a href="">
          <span></span>
          <p>小米手机</p>
        </a>
        <div>
            <p>xiaomi Pro12</p>
            <p>xiaomi 12</p>
            <p>xiaomi青春活力版</p>
            <p>xiaomi 12X</p>
            <p>xiaomi civi</p>          
        </div>
      </li> 
      <li>
        <a href="">
          <span></span>
          <p>Redmi小米</p>
        </a>
        <div class="">
            <p>xiaomi Pro12</p>
            <p>xiaomi 12</p>
            <p>xiaomi青春活力版</p>
            <p>xiaomi 12X</p>
            <p>xiaomi civi</p>             
        </div>
      </li> 
      <li>
        <a href="">
          <span></span>
          <p>电视</p>
        </a>
        <div class="">          
            <p>xiaomi Pro12</p>
            <p>xiaomi 12</p>
            <p>xiaomi青春活力版</p>
            <p>xiaomi 12X</p>
            <p>xiaomi civi</p>  
        </div>
      </li> 
      <li>
        <a href="">
          <span></span>
          <p>笔记本</p>
        </a>
        <div class="">
            <p>xiaomi Pro12</p>
            <p>xiaomi 12</p>
            <p>xiaomi青春活力版</p>
            <p>xiaomi 12X</p>
            <p>xiaomi civi</p>   
        </div>
      </li> 
      <li>
        <a href="">
          <span></span>
          <p>平板</p>
        </a>
        <div class="">
          <p>xiaomi Pro12</p>
          <p>xiaomi 12</p>
          <p>xiaomi青春活力版</p>
          <p>xiaomi 12X</p>
          <p>xiaomi civi</p> 
        </div>
      </li>  
      <li>
        <a href="">
          <span></span>
          <p>路由器</p>
        </a>
        <div class="">
          <p>xiaomi Pro12</p>
          <p>xiaomi 12</p>
          <p>xiaomi青春活力版</p>
          <p>xiaomi 12X</p>
          <p>xiaomi civi</p> 
        </div>
      </li>
    </ul>
  </div>
  
</body>
</html>

大家有什么不懂可以在评论区问我，或者我的代码有什么值得改进的地方，欢迎大家给我更好的建议。

瑶瑶南波万

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
H5C3练习心得 12.17（小米商城下拉二级菜单）--hover,display

然后当鼠标悬停在li上的时候,div设置成display:block;大家有什么不懂可以在评论区问我，或者我的代码有什么值得改进的地方，欢迎大家给我更好的建议。鼠标悬停在A元素时，改变A的指定兄弟元素B的样式（AB可以不相邻，但B必须在A之后）然后，当鼠标悬停在下拉菜单所在的元素上时，我们使用。鼠标悬停在A元素时，改变与A相邻的兄弟元素B元素的样式（B必须与A相邻）以下是我做小米商城下拉二级菜单的代码，大家有需要的可以运行运行，琢磨琢磨。鼠标悬停在A元素时,改变A元素的子元素B元素的样式。
复制链接

扫一扫