2017-11-11 1 views
0

샌드위치 메뉴에서는 페이지가로드되고 마우스 커서로 선택하면 사라질 때 전체 상자의 흰색 채우기가 표시됩니다. 여기샌드위치 메뉴의 문제점과 포인터 채우기

코드 :

<!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> 

내가 원하는 게 무엇이 잘못이고 나는 그것을 해결하는 방법을 어디 샌드위치 메뉴 유적의 충전 만 시각화를 제거하려는 때문에, 말해 것입니다 .

답변

0

그냥 버튼의 CSS 클래스에 background: transparent을 추가

.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이 작업 JSFiddle입니다.

관련 문제