なぜ私の：アクティブな 'または：チェックされたセレクタが機能しますか？

Question

私のウェブサイトに隠されたサイドバーメニューがあります。自分のウェブサイトを自分のデスクトップで開くと、隠されたサイドバーの幅が100px（フルではありません）であることがわかります。モバイルデバイスでウェブサイトを開くと、隠されたサイドバーに幅がなく、サイドバーを表示するためにボタンをクリックする必要があります。

HTML：私はちょうどCSSを使用したいので、私は、 'クリック' に変更するcheckboxを使用して上記のコードで

<div id="mySidenav" class="sidenav sidenav-wrapper"> 
    <img class="logo1" src="../img/logo1.png"><br><br> 
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
</div> 
<div id="contoh" class="content-section-b"> 
    <div class="mobiletoggle"> 
    <label class="fa fa-bars" for="showblock"></label> 
    <input type="checkbox" id="showblock" /> 
    </div> 
</div> 

。

CSS：I上記のコードで

.sidenav { 
    height: 100%; 
    width: 100px; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.8s; 
} 
.logo1 { 
    height: 10%; 
    width: auto; 
    padding-left: 20px; 
    transition: 0.8s; 
} 
.sidenav:hover { 
    width: 250px; 
    transition: 0.8s; 
} 
.sidenav:hover ~ #contoh { 
    background-color: rgba(0,0,0,0.4); 
    filter: grayscale(100%); 
} 
.sidenav:hover .logo1 { 
    height: auto; 
    width: 95%; 
    padding-left: 10px; 
    transition: 0.8s; 
} 
.sidenav a { 
    float:left; 
    width:100%; 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 20px; 
    color: #818181; 
    display: block; 
    opacity: 0; 
    transition: opacity 1300ms 
} 
.sidenav a:hover, .offcanvas a:focus { 
    color: #f1f1f1; 
    background-color:#5fa2db; 
    font-size: 30px; 
} 
#showblock { 
    display: none; 
} 
@media screen and (min-width:768px) { 
    .mobiletoggle { 
    display:none; 
    } 
} 
@media screen and (max-width:767px) { 
    .sidenav { 
    width:0px; 
    } 
    #showblock:checked + .sidenav { 
    width: 250px; 
    transition: 0.8s; 
    } 
} 

が:checkedを使用し、私は:activeを使用している場合、それは少し違うのです。問題はなぜ私の:checked/:activeがうまくいかないのですか？私はこれを見てjsFiddle、それは正常に動作します、なぜ私はそれを使用することはできません？助言がありますか？あなたのCSSを1として

Answer 1

のために、HTMLを変更します。

<input type="checkbox" id="showblock"> 
<div id="mySidenav" class="sidenav sidenav-wrapper"> 
    <img class="logo1" src="../img/logo1.png"><br><br> 
    <a href="#">Home</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
</div> 
<div id ="contoh" class="content-section-b"> 
    <div class="mobiletoggle"> 
    <label class="fa fa-bars" for="showblock"></label> 
    </div> 
</div> 

input#showblockは、あなたのCSSが動作するためにはdiv#mySidenavを超えるべきです。

#showblock:checked + .sidenav { 
    width: 250px; 
    transition: 0.8s; 
}