Questo articolo tratta della procedura di implementazione per applicare il passaggio del mouse e altri stati con proprietà di visibilità utilizzando Tailwind CSS.
Come applicare Hover e altri stati con Visibility Utility in Tailwind?
L'utilità di visibilità può essere utilizzata lungo il passaggio del mouse e altri stati per apportare modifiche alla visibilità sull'interazione dell'utente. Ci sono tre classi sotto l'utilità di visibilità vale a dire ' visibile ”, “ invisibile ', E ' crollo ”. Integriamo alcune classi di visibilità con gli stati al passaggio del mouse negli esempi seguenti per una migliore comprensione.
Esempio 1: applicazione dello stato al passaggio del mouse lungo la classe 'invisibile'.
In questo caso, l'elemento selezionato verrà nascosto quando il cursore dell'utente passa sopra l'elemento, il codice è mostrato di seguito:
< corpo >
< div classe = 'griglia griglia-cols-3 gap-4 my-4 mx-4' >
< div classe = 'bg-blue-500 p-3 centro testo arrotondato' > 01 < / div >
< div classe = 'bg-blue-500 p-3 al passaggio del mouse: centro del testo arrotondato invisibile' > 02 < / div >
< div classe = 'bg-blue-500 p-3 centro testo arrotondato' > 03 < / div >
< / div >
< / corpo >
Spiegazione del codice precedente:
- Innanzitutto, viene creato il div genitore che crea un layout di griglia a tre colonne con uno spazio tra ogni colonna e il margine di ' 4px ”. Usando il CSS Tailwind ' griglia ”, “ grid-cols-3 ”, “ spacco ”, “ Mio ', E ' mx ” classi rispettivamente.
- Avanti, tre figli” div Vengono creati gli elementi e ad essi viene applicato lo stile di base.
- Poi il ' librarsi ” stato o selettore in CSS è assegnato al secondo “div” e al “ invisibile ” è assegnato ad esso separato dai due punti “ : ' cartello. Questo rende il secondo div invisibile quando il mouse viene posizionato sopra di esso.
Anteprima della pagina web dopo la fase di esecuzione:
La gif sopra mostra che il secondo div sta diventando invisibile al passaggio del mouse.
Esempio 2: applicazione dello stato attivo lungo la classe 'invisibile'.
Lo stato 'attivo' applica gli stili quando l'utente seleziona un elemento specifico e non se ne va. Proprio come le caselle di testo quando un utente inizia a inserire dati all'interno del campo, in questo momento il campo è attivo. Per avere una comprensione più chiara dello stato attivo e di come funziona con la classe 'invisibile', visita il codice seguente:
< corpo >< div classe = 'griglia griglia-cols-3 gap-4 my-4 mx-4' >
< div classe = 'bg-blue-500 p-3 centro testo arrotondato' >01< / div >
< div classe = 'bg-blue-500 p-3 attivo: centro del testo arrotondato invisibile' >02< / div >
< div classe = 'bg-blue-500 p-3 centro testo arrotondato' >03< / div >
< / div >
< / corpo >
Nel codice precedente, la classe di ' invisibile ” è assegnato al “ attivo ” stato per il secondo “ div ” per nascondere il secondo elemento div quando viene selezionato.
Dopo l'esecuzione, l'anteprima della pagina web appare così:
L'output sopra mostra che quando viene selezionato il secondo 'div' l'elemento diventa invisibile.
Conclusione
Il passaggio del mouse e altri stati come attivo o focus possono essere utilizzati con le classi fornite dall'utilità di visibilità per modificare le proprietà di visibilità per gli elementi selezionati. Per modificare la visibilità degli elementi al passaggio del mouse, la classe hover viene utilizzata insieme alle classi di visibilità separate dal colore come ' al passaggio del mouse: visibile ' O ' al passaggio del mouse: invisibile ”. Questo blog ha spiegato la procedura per applicare gli stati al passaggio del mouse con l'utilità di visibilità.