Problem with:hover



  • It doesn't work on the behavioral transformation, tell me what's wrong? .menu is not expanding when it is imposed

    .menu {
         width:100px;
      height:100px;
      background:orange;
      transform:scale(0.5);
    }
    .menu:hover {
     transform:scale(1);
    }
    .show-menu {
     width:50px;
     height:50px;
     background:black;
     position:absolute;
     z-index:1000;
     top:33px;
     left:33px;
    }
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Документ без названия</title>
    <link href="about.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div class="menu"></div>
    <div class="show-menu"></div>
    </body>
    </html>



  • In addition to the above, menu hides behind show-menu because the latter has z-index: 1,000, so even if you put menu above, it will still be on the bottom layer. Look at the sss below. And if it's worth a scale (0.5) you're down 50 percent, and at hover's set scale(1), it's a 100% return, so in this case scale(1) works.

    .menu {
       width:100px;
      height:100px;
      background:orange;
      transform: scale(0.5);
       z-index:1001;
    }
    .menu:hover {
     transform: scale(1);
      transition: all 0.4s;
    }
    .show-menu {
     width:50px;
     height:50px;
     background:black;
     position:absolute;
     z-index:1000;
     top:33px;
     left:33px;
    }
    <div class="menu"></div>
    <div class="show-menu"></div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2