爲什麼我的：active或者：checked選擇器不工作？

Question

我在我的網站上有一個隱藏的側邊欄菜單，如果我在我的桌面上打開我的網站，我隱藏的側邊欄寬度爲100px（不完整），因此爲了揭示它，您必須將其懸停在其上。如果我在移動設備上打開我的網站，我的隱藏邊欄沒有寬度，我必須點擊按鈕才能顯示邊欄。

HTML：

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

在上面的代碼我用checkbox改變 '點擊'，因爲我只想用CSS。

CSS：

.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，它工作正常，所以爲什麼我不能使用它？有什麼建議麼？

Answer 1

根據您的CSS，修改你的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應該是div#mySidenav爲了你的CSS工作上面。

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