Come cambiare il colore di un div passando con il mouse

Autore: Virginia Floyd
Data Della Creazione: 12 Agosto 2021
Data Di Aggiornamento: 16 Novembre 2024
Anonim
immagine che cambia al passaggio del mouse (solo css)
Video: immagine che cambia al passaggio del mouse (solo css)

Contenuto

I tag DIV (un'abbreviazione di "split") definiscono una sezione di un documento HTML e sono spesso usati con il linguaggio CSS per creare il layout di base di un sito. Un DIV può essere personalizzato utilizzando i CSS per definire margini, spaziatura, bordi, dimensioni del testo, allineamento o colore di sfondo, nonché trucchi più avanzati, come cambiare il colore del DIV quando un utente passa il mouse su di esso.


indicazioni

Il linguaggio CSS ti consente di applicare trucchi per migliorare l'interazione dell'utente con la pagina (Comstock / Comstock / Getty Images)

  1. Apri il documento dalla tua pagina web in un editor di testo.

  2. Posiziona il cursore su una linea vuota tra ""E"'.

  3. Digita "type = 'text / css'>" e premi "Invio". Con questo inizierai a creare uno script CSS.

  4. Digita "# div1: hover {background-color: # ff0000;}" e premi "Invio". Questo personalizzerà un contenitore DIV con il valore "div1" come proprietà ID utilizzando il colore di sfondo "# ff0000" (un valore esadecimale) quando viene attivato lo stato "hover", che avverrà quando il cursore del mouse viene posizionato sopra il DIV. Questi valori di ID e di colore di sfondo possono essere modificati, se necessario.


  5. Digitare ""per chiudere il tag script CSS.

  6. Posiziona il cursore del testo su una linea vuota tra i tag "" e "".

  7. Digitare "" e premere "Invio" per creare un contenitore DIV con il valore ID "div1". Se hai cambiato il nome dell'ID nel passaggio 4, devi inserire lo stesso nome qui.

  8. Digita o incolla un contenuto da includere nel DIV e premi "Invio".

  9. Digitare "" per chiudere il contenitore DIV.

  10. Fai clic su "File" e "Salva" per salvare il documento.