Ändern der Stileigenschaften von zwei HTML-Elementen, mit Pseudoereignissen

Question

Ich habe einen CSS-Code, der Stileigenschaften zwei andere HTML-Elemente mit Ereignissen ändert. Wenn ein Kontrollkästchen aktiviert ist, möchte ich die Hintergrundfarbe eines Beschriftungsfelds und eines Div-Tags ändern. Und wenn ich das Kontrollkästchen deaktiviere, muss die Hintergrundfarbe mit der vorherigen umgeschaltet werden. Der Code arbeitet daran, css-Eigenschaften des Label-Tags zu ändern. Aber nicht für Div-Tag arbeiten. Hier ist die CSS:

input[type=checkbox] { 
display:none; 
} 

input[type=checkbox] + label 
{ 
background: #999; 
height: 16px; 
width: 16px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
input[type=checkbox]:checked + label 
{ 
background: #0080FF; 
height: 16px; 
width: 16px; 
display:inline-block; 
padding: 0 0 0 0px; 
} 
input[type=checkbox]:checked ~ #menu_content 
{ 
    height:100vh; 
     width:25vh; 
     position:fixed; 
     left:0; 
     top:11%; 
     background-color:#41a3d8; 
} 
input[type=checkbox]:not(:checked) ~ #menu_content 
{ 
    height:100vh; 
     width:25vh; 
     position:fixed; 
     left:0; 
     top:11%; 
     background-color:#fff; 
     border-style:solid; 
     border-width:1px 1px 1px 1px; 
} 

Hier ist der HTML-Code:

<div id="header"> 
    <span id="nav_button"> 
     <input type='checkbox' name='thing' id="thing"/> 
     <label for="thing"> 
     </label> 
    </span> 
    <span id="title"> 
     &lt;TITLE&gt; 
    </span> 
</div> 
<div id="menu_content"> 
    <p id="menu_head"> 
     Nav 
    </p> 
    <a href="#" id="menu_links"> 
     Link1 
    </a> 
    <a href="#" id="menu_links"> 
     Link2 
    </a> 
    <a href="#" id="menu_links"> 
     Link3 
    </a> 
</div> 

Ich versuche, dies zu tun, ohne jede Art von Skripten

Answer 1

Die ~ Selektoren funktioniert nur mit es Geschwister, also würde ich empfehlen, das div ein Geschwister des Kontrollkästchens wie das Beispiel zu machen.

input[type=checkbox] { 
 
display:none; 
 
} 
 

 
input[type=checkbox] + label 
 
{ 
 
background: #999; 
 
height: 16px; 
 
width: 16px; 
 
display:inline-block; 
 
padding: 0 0 0 0px; 
 
} 
 
input[type=checkbox]:checked + label 
 
{ 
 
background: #0080FF; 
 
height: 16px; 
 
width: 16px; 
 
display:inline-block; 
 
padding: 0 0 0 0px; 
 
} 
 
input[type=checkbox]:checked ~ #menu_content 
 
{ 
 
    height:100vh; 
 
     width:25vh; 
 
     position:fixed; 
 
     left:0; 
 
     top:11%; 
 
     background-color:#41a3d8; 
 
} 
 
input[type=checkbox]:not(:checked) ~ #menu_content 
 
{ 
 
    height:100vh; 
 
     width:25vh; 
 
     position:fixed; 
 
     left:0; 
 
     top:11%; 
 
     background-color:#fff; 
 
     border-style:solid; 
 
     border-width:1px 1px 1px 1px; 
 
}

<div id="header"> 
 
    <span id="nav_button"> 
 
     <input type='checkbox' name='thing' id="thing"/> 
 
     <label for="thing"> 
 
     </label> 
 
     <div id="menu_content"> 
 
      <p id="menu_head"> 
 
       Nav 
 
      </p> 
 
      <a href="#" id="menu_links"> 
 
       Link1 
 
      </a> 
 
      <a href="#" id="menu_links"> 
 
       Link2 
 
      </a> 
 
      <a href="#" id="menu_links"> 
 
       Link3 
 
      </a> 
 
     </div> 
 
    </span> 
 
    <span id="title"> 
 
     &lt;TITLE&gt; 
 
    </span> 
 
</div>

Eine andere Möglichkeit wäre mit Js werden .. oder mit reinem CSS wird mit CSS-Selektoren in der URL werden: Ziel() https://stackoverflow.com/a/9442590/2894798 (noch nicht ausprobiert ...)

Answer 2

Wie Sie sehen können, funktionieren die ersten beiden CSS-Regeln wie gewünscht, die anderen jedoch nicht. Der Grund ist, dass label ein Geschwister zu diesem input ist und direkt danach input folgt, was dem + im CSS-Selektor entspricht.

Aber #menu_content ist kein Geschwister (wie ~ würde erfordern), es ist zwei Ebenen höher.

Sie können dies ohne ein Skript nicht tun, es gibt keine CSS-Methoden, um Vorfahren auszuwählen.

input[type=checkbox]+label { 
 
    background: #999; 
 
    height: 16px; 
 
    width: 16px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
} 
 

 
input[type=checkbox]:checked+label { 
 
    background: #0080FF; 
 
    height: 16px; 
 
    width: 16px; 
 
    display: inline-block; 
 
    padding: 0 0 0 0px; 
 
} 
 

 
input[type=checkbox]:checked~#menu_content { 
 
    height: 100vh; 
 
    width: 25vh; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 11%; 
 
    background-color: #41a3d8; 
 
} 
 

 
input[type=checkbox]:not(:checked)~#menu_content { 
 
    height: 100vh; 
 
    width: 25vh; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 11%; 
 
    background-color: #fff; 
 
    border-style: solid; 
 
    border-width: 1px 1px 1px 1px; 
 
}

<div id="header"> 
 
    <span id="nav_button"> 
 
     <input type='checkbox' name='thing' id="thing"/> 
 
     <label for="thing"> 
 
     </label> 
 
    </span> 
 
    <span id="title"> 
 
     &lt;TITLE&gt; 
 
    </span> 
 
</div> 
 
<div id="menu_content"> 
 
    <p id="menu_head"> 
 
    Nav 
 
    </p> 
 
    <a href="#" id="menu_links"> 
 
     Link1 
 
    </a> 
 
    <a href="#" id="menu_links"> 
 
     Link2 
 
    </a> 
 
    <a href="#" id="menu_links"> 
 
     Link3 
 
    </a> 
 
</div>