Come modificare il Fondo e il colore del testo al passaggio del mouse

March 3

Come modificare il Fondo e il colore del testo al passaggio del mouse


Modifica dei colori di sfondo e del testo quando un utente mouse su un'area sul tuo sito web è utile non solo per la progettazione, ma anche per fornire un feedback visivo per interazione con l'utente, che aumenta l'usabilità del tuo sito web. Questa tecnica è di solito utilizzato per i collegamenti, ma può essere applicato anche ad altri testi, o anche altri elementi di progettazione Web, tra cui tavoli, divisori ed elenchi. Mentre gli script Java può eseguire questa operazione, un metodo più efficiente e più semplice è quello di utilizzare Cascading Style Sheets (CSS) con il ": hover" dinamica pseudo-classe.

istruzione

1 Scrivere il codice HTML per gli elementi che si desidera all'utente di interagire con. Si noti che è possibile applicare l'effetto del mouse-over a tutti gli elementi di un certo tipo, o tutti gli elementi di una certa classe, o elementi specifici di un determinato ID. Assicurati di identificare correttamente gli elementi. Esempi:
<a href="linked_url"> Qualsiasi link e il suo sfondo che cambierà colore </a>
<a class="turn-red" href="linked_url"> Un link in classe "turn-rossa" e il suo sfondo che cambierà colore </a>
<a id="unique-color" href="linked_url"> Un collegamento con l'ID di "unico-colore" e il suo sfondo che cambierà colore </a>

2 Scrivere le regole di stile nella sezione <head> della pagina. È possibile impostare tutti gli stili, tra cui il colore del testo e il colore di sfondo designando uno stile con la pseudo-classe ": hover." Esempi (elemento, classe e tipi di ID, rispettivamente):
a: hover {color: blue; background-color: white; }
a.turn-rosso: hover {color: red; background-color: black; }
un unico #-color: hover {color: purple; background-color: yellow; }

3 Pubblicare la pagina Web e verificare le impostazioni.

Consigli e avvertenze

  • Si noti che se si utilizza la a: link e un: stili visitati nelle definizioni di stile, è necessario inserire l'una: definizione di stile hover dopo questi.
  • Assicurati di testare la vostra pagina Web su diversi browser e versioni differenti. I browser meno recenti non possono rendere la vostra pagina Web in modo corretto, se questo metodo funziona per la maggior parte degli utenti del Web, anche se hanno disattivato JavaScript.