C'è un modo per nascondere un div con css solo quando si fa clic su un collegamento. Sto facendo un popup che deve essere in grado di chiudere quando non c'è JS. Ho provato vari metodi ma non hanno funzionato quando il pulsante è all'interno del div che deve nascondersi.Nascondi A Div con solo CSS
quando il pulsante è all'interno del div che deve essere nascosto.
Risposta breve: No, non è possibile ottenere ciò quando il pulsante si trova all'interno dell'elemento.
Grazie Joseph Marikle
Tuttavia, è possibile raggiungere questo obiettivo quando il pulsante è al di fuori della 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>Grazie, Noscript sarebbe in grado di farlo? Non ho familiarità con il modo in cui funziona, mi dispiace se ho torto completamente. Potrei anche usare un keyframe al clic per spostare la casella di controllo fuori dal sito. – Verpz
Potrebbe noscript essere in grado di nascondere il div con il pulsante al suo interno? Scusa, non ho capito. – Verpz
"Risposta breve: No". Sì, puoi farlo anche tu. Basta usare l'attributo 'for': https://jsfiddle.net/jmarikle/b3981op4/1 –
L'esempio seguente nasconde il div quando la casella è selezionata.
Usa il selettore #closebutton ~ #targetdiv {... che funziona solo con i suoi elementi su questo ordine. Quindi la casella di controllo è posizionata all'interno del div principale sul layout ma prima di esso sul codice.
.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>
Potete per favore inserire un metodo che avete provato .... – Nofi
C'è un modo per farlo con noscript allora? – Verpz
E no, non posso non impegnarmi in GitHub così frequentemente, quindi è perso mi dispiace. @Coding ... – Verpz