Probleme des Sandwich-Menüs im Vergleich zur Zeigerfüllung

Was passiert ist, dass im Sandwich-Menü die weiße Füllung der ganzen Box angezeigt wird, wenn die Seite geladen wird und wenn Sie mit dem Mauszeiger anzeigen, verschwindet es.Probleme des Sandwich-Menüs im Vergleich zur Zeigerfüllung

Hier ist der Code:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body style="background-color:black;"> 
     <style type="text/css"> 
      .sidebarBtn{  
       color: #fff; 
       font-size: 22px; 
       position: absolute; 
       right: 30px; 
       top: 25px; 
       z-index: 101; 
       cursor: pointer; 
       display: none; 
       height: 16px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/ 
       width: 27px; 
       border-top: 2px solid #fff; 
       display: block; 
       border: none; 
       height: 26px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/ 
       top: 25px; 
       outline: 10px solid transparent; 
      } 

      .sidebarBtn span{ 
       height: 2px; 
       width: 100%; 
       display: block; 
       position: absolute; 
       top: 50%; 
       left: 0; 
       background: #fff; 
       margin-top: -1px; 
       -webkit-transition: background 0 0.3s; 
       transition: background 0 0.3s; 
      } 

      .sidebarBtn span:before, 
      .sidebarBtn span:after{ 
       content: ''; 
       position: absolute; 
       left: 0; 
       height: 2px; 
       width: 100%; 
       background: #fff; 
       display: block; 
       -webkit-transition:bottom 0.30s linear,top 0.30s linear; 
       -moz-transition:bottom 0.30s linear,top 0.30s linear; 
       -o-transition:bottom 0.30s linear,top 0.30s linear; 
       transition:bottom 0.30s linear,top 0.30s linear; 

       -webkit-transition-duration: 0.3s, 0.3s; 
       -moz-transition-duration: 0.3s, 0.3s; 
       transition-duration: 0.3s, 0.3s; 
      } 

      .sidebarBtn span:before{ 
       top: -8px; 
       -webkit-transition-property: top, -webkit-transform; 
       -moz-transition-property: top, -moz-transform; 
       transition-property: top, transform; 
      } 

      .sidebarBtn span:after{ 

      bottom: -8px; 
       -webkit-transition-property: bottom, -webkit-transform; 
       -moz-transition-property: bottom, -moz-transform; 
       transition-property: bottom, transform; 
      } 

      .sidebarBtn:hover{ 
       background:rgba(255,255,255,.15); 
       outline-color:rgba(255,255,255,.15); 
      }    

     </style> 
     <button class="sidebarBtn"> 
     <span></span> 
     </button> 
</body> 
</html>

Was ich will, ist, mir zu sagen, wo der Fehler ist und wie kann ich es lösen, da ich die Füllung und nur die Visualisierung der Sandwich-Menü bleibt entfernen möchten .

Quelle

2017-11-11 kirous

Fügen Sie einfach background: transparent an die CSS-Klasse der Schaltfläche:

.sidebarBtn{  
       color: #fff; 
       font-size: 22px; 
       position: absolute; 
       right: 30px; 
       top: 25px; 
       z-index: 101; 
       cursor: pointer; 
       display: none; 
       height: 16px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/ 
       width: 27px; 
       border-top: 2px solid #fff; 
       display: block; 
       border: none; 
       height: 26px; /*AQUI ES DONDE SE PINTA EL BLOQUE*/ 
       top: 25px; 
       outline: 10px solid transparent; 
       background: transparent; 
      }

Here die Arbeits JSFiddle ist.

Quelle

2017-11-11 23:39:24

Probleme des Sandwich-Menüs im Vergleich zur Zeigerfüllung

Antwort

Verwandte Themen