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>
私が欲しい何をすべきかは、障害があると私はそれを解決することができますどのようにどこ私はサンドイッチメニュー遺跡の充填のみ可視化を削除するために、私に教えています。