Visualizzazione risultati 1 fino 7 di 7

Discussione: [CSS] Button:active

  1. #1
    Guest

    Unhappy [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

    Thanks..

  2. #2
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito

    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...
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  3. #3
    Guest

    Predefinito

    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>
    Ultima modifica di mathis : 11-09-2013 alle ore 12.57.52

  4. #4
    L'avatar di javascripter
    javascripter non è connesso Moderatore
    Data registrazione
    14-02-2010
    Messaggi
    1,114

    Predefinito

    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;
    }
    Ultima modifica di javascripter : 11-09-2013 alle ore 14.21.33

  5. #5
    Guest

    Predefinito

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

    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.
    Ultima modifica di mathis : 11-09-2013 alle ore 14.24.38

  6. #6
    L'avatar di javascripter
    javascripter non è connesso Moderatore
    Data registrazione
    14-02-2010
    Messaggi
    1,114

    Predefinito

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

    Citazione Originalmente inviato da mathis Visualizza messaggio
    ---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.
    Ultima modifica di javascripter : 11-09-2013 alle ore 14.24.16

  7. #7
    Guest

    Predefinito

    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.

    Thanks..
    Ultima modifica di alemoppo : 11-09-2013 alle ore 19.44.48 Motivo: edit

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •