Ukryj div za pomocą tylko CSS

Question

Czy istnieje sposób na ukrycie elementu div za pomocą css tylko po kliknięciu łącza. Robię wyskakujące okienko, które musi być w stanie zamknąć, gdy nie ma JS. Próbowałem różnych metod, ale nie zadziałały, gdy przycisk znajduje się wewnątrz elementu div, który musi się ukryć.

Answer 1

, gdy przycisk znajduje się wewnątrz elementu div, który musi się ukryć.

Krótka odpowiedź: Nie, nie można tego uzyskać, gdy przycisk znajduje się wewnątrz elementu. ^{Dzięki Joseph Marikle}

Jednak można to osiągnąć, gdy przycisk jest poza div.

#hide { 
 
    display: none; 
 
} 
 
label { 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
} 
 
#hide:checked ~ #randomDiv { 
 
    display: none; 
 
}

<input type="checkbox" id="hide" /> 
 

 

 
<div id="randomDiv"> 
 
    This is a div 
 
    <label for="hide">Hide div</label> 
 
</div>

Answer 2

Poniższy przykład ukrywa div, gdy jest zaznaczone pole wyboru.

Używa selektora #closebutton ~ #targetdiv {..., który działa tylko z jego elementami w tym zamówieniu. Tak więc pole wyboru znajduje się wewnątrz głównego div w układzie, ale przed nim na kodzie.

.main { 
 
    border-radius: 5px; 
 
    padding: 30px; 
 
    margin-bottom: 5px; 
 
} 
 

 
#A { 
 
    background: gold; 
 
} 
 

 
#B { 
 
    background: skyblue; 
 
} 
 

 
#C { 
 
    background: yellowgreen; 
 
} 
 

 
.close { 
 
    float: right; 
 
    margin-top: 30px; 
 
    margin-right: 75px; 
 
    height: 20px; 
 
    width: 20px; 
 
} 
 

 
.close:checked { 
 
    display: none; 
 
} 
 

 
.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C { 
 
    display: none; 
 
} 
 

 
body { 
 
    overflow-y: scroll; 
 
}

<div id=groupA><input class="close" type="checkbox"> 
 
<div id=A class=main>info A</div></div> 
 

 
<div id=groupB><input class="close" type="checkbox"> 
 
<div id=B class=main>info B</div></div> 
 

 
<div id=groupC><input class="close" type="checkbox"> 
 
<div id=C class=main>info C</div></div>