Attraverso una combinazione di markup HTML, le dichiarazioni del foglio di stile CSS e codice JavaScript, pagine Web può implementare effetti interattivi, alterando l'aspetto degli elementi quando l'utente sposta il mouse e si posiziona su elementi specifici. Gli sviluppatori possono aggiungere effetti interattivi di elementi HTML utilizzando gli attributi di evento o di elementi di ancoraggio utilizzando i selettori CSS. Gli attributi possono istruire il browser Web per rilevare l'utente spostando il mouse o disattivare qualsiasi elemento particolare, alterando l'aspetto elemento quando questo accade.

Elementi HTML

Pagine Web possono includere gli effetti al passaggio del mouse su qualsiasi elemento HTML. Ogni elemento HTML si compone di apertura e chiusura tag, alcuni contenuti tra loro e, facoltativamente, attributi. Il codice HTML di esempio riportato di seguito viene illustrato un elemento tipico:
< div id = "intelem" > Muovi il mouse sopra questo testo < / div >

Questo elemento ha alcuni contenuti di testo semplice e un attributo ID. L'attributo ID dovrebbe apparire solo una volta all'interno di una singola pagina, come è questo attributo per l'identificazione di elemento univoco. La funzione di librarsi di JavaScript è possibile utilizzare l'attributo ID per modificare l'aspetto dell'elemento. Effetti hover possono anche applicare agli elementi di ancoraggio utilizzando il codice CSS. Il markup riportato di seguito viene illustrato un ancoraggio HTML:
< un href="page.html" > pagina A < /a >

Attributi

Gli elementi HTML possono includere vari attributi dell'evento. Poiché l'effetto hover si verifica quando gli utenti tira il mouse sopra un elemento, gli elementi HTML devono rilevare gli eventi del mouse. Gli eventi "onmouseover" e "onmouseout" rilevano l'utente rotolamento il mouse e disattivare un elemento. Il seguente codice di esempio estesa viene illustrata l'aggiunta di questi attributi di due eventi all'elemento:
< div id = "intelem" onmouseover="onElem(this.id)" onmouseout="offElem(this.id)" > Muovi il mouse sopra questo testo < / div >

Questo codice indica al browser Web per rilevare l'utente rotolamento del mouse attiva o disattiva l'elemento, chiamando le funzioni JavaScript specificate quando si verifica questa situazione. Ogni chiamata di funzione passa l'ID di elemento come parametro, in modo che il codice JavaScript sarà in grado di identificare l'elemento all'interno della pagina.

JavaScript

Pagine Web implementare effetti interattivi utilizzando codice JavaScript. Questo codice può essere incluso all'interno di JavaScript file salvati con estensione ". js", collegata a nella sezione head della pagina HTML come segue:
< script type = "text/javascript" src="pagefunctions.js" >< / script >

Questo fornisce l'accesso alle eventuali funzioni elencate in un file denominato "pagefunctions.js", che viene salvato nella stessa directory della pagina. In alternativa, gli sviluppatori possono includere codice JavaScript direttamente nella sezione head della pagina come segue:
< script type = "text/javascript" >
funzioni qui
< / script >

Questa sezione può contenere le funzioni di JavaScript per implementare l'effetto hover.

Funzioni

Funzioni JavaScript per implementare gli effetti al passaggio del mouse prima identificano gli elementi essere interagiti con. I seguenti profili di funzione rappresentano gli attributi di due eventi chiamati quando il mouse viene spostato e disattivare un elemento:
Function onElem(elemID) () {
implementazione della funzione qui
}
Function offElem(elemID) () {
implementazione della funzione qui
}

All'interno di questi corpi di funzione, gli sviluppatori possono implementare l'effetto hover. Il codice seguente ottiene un riferimento all'elemento chiamando il metodo:
var theElem = document.getElementById(elemID);

La funzione può quindi applicare proprietà di stile per l'elemento, come segue:
theElem.style.color = "#FF0000";

La funzione chiamata quando l'utente sposta il mouse fuori l'elemento potrebbe ripristinare il suo originale aspetto visivo. Ogni volta che esegue queste funzioni, essi possono utilizzare il parametro ID passato per individuare l'elemento corretto e modificare il suo aspetto come necessario.

Selezione di CSS

Le dichiarazioni CSS per un sito possono stile elementi di ancoraggio. CSS è possibile specificare impostazioni di aspetto particolare per quando l'utente passa il mouse sopra un punto di ancoraggio. La dichiarazione CSS seguente viene illustrata l'impostazione l'aspetto della pagina ancoraggi al passaggio del mouse:
a: hover {color: #333333;}

Questa sezione può includere altre dichiarazioni CSS per dettare lo stile del contenuto di ancoraggio. Il codice CSS anche facoltativamente possibile specificare le impostazioni per l'elemento di ancoraggio nel suo stato normale come un link HTML e per i link già visitati dall'utente.