Почему не работают мои: активные или проверенные селекторы?

Question

У меня есть скрытое меню боковой панели на моем веб-сайте, если я открываю свой сайт на своем рабочем столе, моя скрытая боковая панель имеет ширину 100 пикселей (не полная), поэтому, чтобы показать все, что вам нужно сделать, это навести на нее курсор. Если я открою свой сайт на мобильном устройстве, моя скрытая боковая панель не имеет ширины, и я должен нажать кнопку, чтобы открыть боковую панель.

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