一.下拉菜单

image.png

  1. <style>
  2.         *{margin:0;padding:0}
  3.         ul{
  4.             list-style: none;
  5.             /* overflow: hidden; */
  6.             line-height: 50px;
  7.             background: pink;
  8.         }
  9.         li{
  10.             width:100px;
  11.             float: left;
  12.             text-align: center;
  13.         }
  14.         li:hover{
  15.             background: deeppink;
  16.         }
  17.         .drop-menu{
  18.             position: relative;
  19.         }
  20.         .drop-content{
  21.             display: none;
  22.             width:100px;
  23.             position: absolute;
  24.             background: deeppink;
  25.         }
  26.         .row::after{
  27.             content:"";
  28.             display: table;
  29.             clear: both;
  30.         }
  31.         .drop-content a{
  32.             display: block;
  33.         }
  34.         .drop-menu:hover .drop-content{
  35.             display: block;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <ul class="row">
  41.         <li class="drop-menu">
  42.             收藏夹
  43.             <div class="drop-content">
  44.                 <a href="#">收藏宝贝</a>
  45.                 <a href="#">收藏店铺</a>
  46.             </div>
  47.         </li>
  48.         <li>卖家中心</li>
  49.         <li>联系客服</li>
  50.     </ul>
  51. </body>
  52. </html>

二.遮罩

image.png

<style>
        *{margin: 0;padding: 0}
        .parent{
            width: 200px;
            height: 300px;
            position: relative;
            border: 1px solid #333;
            overflow: hidden;
        }
        img{
            width: 200px;
            height: 300px;
        }
        .cover{
            z-index: 100;
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 300px;
            background: rgba(51,51,51,0.822);
            transform-origin: right 
            bottom;
            transform: rotate(90deg);
            transition: all 1s;
        }
        .parent:hover .cover{
            transform: rotate(0deg)
        }
    </style>
</head>
<body>
    <div class="parent">
        <img src="images/bg.jpg" alt="">
        <div class="cover">

        </div>
    </div>
</body>
</html>

三.img在div中的间隙问题

 <style>
        div{
            background: red;
            /* font-size: 0; */
        }
        img{
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/../timg.jpg" alt="">
    </div>
</body>
</html>

四.input输入框下拉框

image.png

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            display: none;
        }
        input:focus+div{
            display: block;
        }
    </style>
</head>
<body>
    <input type="text">
    <div></div>
</body>
</html>

五.鼠标悬停旋转

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px;
            animation: animate 3s linear infinite;
            /* animation-play-state 动画播放状态 */
            animation-play-state: paused;
        }
        div:hover{
            animation-play-state: running;
        }
        @keyframes animate{
            0%{
                transform: rotate(0deg)
            }
            50%{
                transform: rotate(180deg)
            }
            100%{
                transform: rotate(360deg)
            }
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

六.鼠标在父级悬停，子元素hover

<style>
        .parent{
            width: 200px;
            height: 200px;
            background: red;
        }
        .child{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .parent:hover .child{
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

        </div>
    </div>
</body>
</html>

七.鼠标悬停旋转

 <style>
        div{
            width: 100px;
            height: 200px;
            background: red;
            transform: rotate(90deg);
            transition: all 1s;
            transform-origin: right bottom;
        }
        div:hover{
            transform: rotate(0deg)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>