[CSS] Button:active

Salve gente..
Non capisco dov'è l'intoppo nel mio codice, il quale, dovrebbe far si che al click di un bottone venga visualizzato un div con il suo contenuto.
Io ho fatto una cosa del tipo:
CSS:

Codice HTML:

---

#mostra{
        visibility: none;
}
button:active #mostra{
        visibility: visible;
}

---

HTML:

Codice HTML:

---

<button>Click!</button>
<div id="mostra">
      <span>Contenuto</span>
</div>

---

Ho già lavorato con effetti del genere ma non capisco cosa non va :tongue

Thanks..

Non funziona perché stai selezionando il DIV #mostra nel modo sbagliato, visto che non è un "discendente" del tag <button>, ma un suo "fratello".

La sintassi corretta per la seconda dichiarazione è la seguente:

Codice:

---

button:active + #mostra{
        visibility: visible;
}

---

(cfr. http://www.gleenk.com/selettori-css-...-da-conoscere/)

Stammi bene...

Ciao, avevo provato ma niente da fare.
Non vorrei che il problema stia nel fatto che, scrivendo la struttura completa, è presente un altro div e il div interessato è all'interno di un tag <noscript>:

Codice HTML:

---

<div id="contenitore">
<button onclick="doCascade(50)">
        <span>Click!</span>
</button>
        <div id="effetto">
        </div>
        <noscript>
                <div id="mostra">
                    <span>Contenuto da mostrare</span>
                </div>
        </noscript>
</div>

---

Oltre a ciò che ha detto dementialsite, ho notato un errore nel css.
La proprietà visibility ammette come valori visible e hidden (oltre che collapse e inherit) , tu hai usato none.

Codice:

---

#mostra{
        visibility: hidden;
}
button:active + #mostra{
        visibility: visible;
}

---

Si, questo è stato un errore nel riportare il codice infatti ricontrollando nel mio codice è scritto correttamente :tongue

Comunque provando mi sono accorto che se levo il tag <noscript> funziona perfettamente, come posso risolvere questo problema?
Io infatti ho bisogno di fare questo tipo di visualizzazione solo se javascript è disabilitato.

Thanks...

---EDIT---
A quanto pare solo nel codice in questa pagina funziona.
Se testo il tutto in locale su xampp non funziona.

Prova a specificare il tag noscript nella regola: button:active + noscript #mostra

Citazione:

---

Originalmente inviato da mathis

---EDIT---
A quanto pare solo nel codice in questa pagina funziona.
Se testo il tutto su xampp inserendo comunque div, e altre cose non funziona. Ora provo a inserire il tutto su Altervista per vedere se è un problema di xampp ma non credo.

---

Non credo sia un problema server-side.
Devi solamente specificare il contenitore (o contenitori) padre di #mostra.

Su Altervista sembra funzionare ma in locale niente.
Continua a non farmi visualizzare niente.

EDIT:

Il problema è stato "risolto" in quanto funziona adesso ma siccome avrei voluto che una volta cliccato il contenuto resti visibile (sempre tramite CSS) e, cercando su internet, non mi sembra possibile mi tocca andare di php. :tongue

Thanks..