Cambiando i colori di sfondo e del testo quando un mouses utente su un'area sul tuo sito Web è utile non solo per scopi di progettazione, ma anche per fornire un feedback visivo per l'interazione dell'utente, che aumenta l'usabilità del tuo sito Web. Questa tecnica viene solitamente utilizzata per i collegamenti, ma può essere applicata anche ad altro testo, o anche altri elementi di Web design, tra cui tabelle, elenchi e divisori. Mentre Java script per eseguire questa operazione, un metodo più efficace e più semplice consiste nell'utilizzare Cascading Style Sheets (CSS) con il ": hover" pseudo-classe dinamica.

Istruzioni

1

Scrivere il codice HTML per gli elementi che si desidera all'utente di interagire con. Si noti che è possibile applicare l'effetto MouseOver per tutti gli elementi di un certo tipo, o tutti gli elementi di una certa classe, o elementi specifici di un determinato ID. Assicurarsi di identificare correttamente gli elementi. Esempi:
< a href = "linked_url" > qualsiasi link e il suo sfondo che cambierà colore < /a >
< una classe = "Disabilita-rosso" href = "linked_url" > un link in classe "Disabilita-rosso" e il suo sfondo che cambierà colore < /a >
< un id = "colore unico" href = "linked_url" > un link 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 qualsiasi stili, tra cui il colore del testo e colore di sfondo designando uno stile con la pseudo-classe ": al passaggio del mouse." Esempi (elemento, di classe e ID tipi rispettivamente):
un: hover {color: blue; background-color: bianco;}
a.Turn-rosso: hover {color: rosso; background-color: black;}
un #unique-colore: hover {color: purple; background-color: giallo;}

3

Pubblicare la pagina Web e verificare le impostazioni.

Consigli & Avvertenze

• Si noti che se si utilizza l'un: link e un: visitato stili nelle definizioni di stile, è necessario inserire l'un: hover definizione di stile dopo questi.
• Assicurarsi di testare pagine Web su diversi browser e versioni diverse. Browser di versioni precedenti non possono essere la pagina Web corretta, anche se questo metodo funziona per la maggior parte degli utenti Web, anche se hanno disattivato JavaScript.