Zeigen und verstecken von div-auf checkbox-Zustand mit css
Was ich versuche zu tun, ist zeigen und ausblenden, div bei der label - + - checkbox aktiviert ist. (Nur CSS)
Also, wenn [Anmelden] geklickt wird (aktiviert). Verstecken sich(div.entfernen-check) und der verborgene Eingang (div#E-Mail). Ich dachte, der code, den ich hatte würde gut genug sein, ist es aber nicht. Was mache ich falsch?
Mein code:
Html:
<div class="remove-check">
<label for="reveal-email" class="btn" style="width: 300px"><input type="checkbox" id="reveal-email" role="button" />Sign Up</label>
</div>
<br>
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn" >Apply</a>
</form>
</div>
CSS:
input[type=checkbox]{
visibility: hidden;
}
input[type=checkbox]:checked ~ .remove-check{
display: none;
}
input[type=checkbox]:checked ~ #email{
display: block;
}
#email{
display: none;
}
Hier ein fiddle Ihnen zu zeigen, was ich arbeite.
Danke für Eure Hilfe im Voraus.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Derzeit gibt es keine parent-Selektoren in CSS, das ist der Grund, warum der code nicht funktioniert. Die checkbox muss auf der gleichen Ebene wie die div in Frage. Gibt es einen übergeordneten CSS-Selektor?
Können Sie es aus dem label setzen Sie auf der gleichen Ebene wie hier gezeigt.
Dieses Beispiel sollte funktionieren:
CSS:
HTML:
Blick auf JSFiddle
<input type="hidden" name="name" id="id_name_email">
?Den
~
CSS-Selektor genannt der General Sibling Selektor. Es wählt nur die Geschwister der vorstehenden Auswahl (nicht Eltern oder Tanten/Onkel).Beispiel:
Bedeutet:
Für alle Checkboxen, die aktiviert sind, verstecken sich alle Geschwister (die Elemente auf der gleichen Ebene, in der das bietet), die haben die Klasse zu entfernen,-überprüfen.
Derzeit gibt es keine CSS-Selektoren, die Stilarten der Kette an die Eltern.
Haben Sie entweder die checkbox Geschwister des E-Mail-div oder einige nicht-CSS-Methode (wie JavaScript), um zu tun, was Sie wollen.