CSS Immagine Rollover Effetto

rollover sono strumenti utili per aiutare gli utenti finali monitorare il loro mouse sulla vostra pagina web. Un sito web designer spesso in valigia un sacco di informazioni dettagliate in una pagina , e l'utente finale avrà bisogno di una coda visivo che il suo mouse è rotolato sopra something.There sono due modi di base per creare un rollover . È possibile utilizzare il linguaggio di scripting lato client chiamato JavaScript per realizzare il compito , oppure è possibile utilizzare i fogli di stile (CSS) per realizzare il compito . Questo articolo riguarda il metodo di fogli di stile CSS . Creazione del testo rollover

Creare un documento XHTML generico nel vostro editor di testo come visto nell'immagine .

* Includere il DOCTYPE di transizione e che le tag di codifica . * Includere i tag del titolo tra i tag head * Includere i tag di stile tra i tag head

tra i tag body , digitare le seguenti parole : . . .

Questo è un rollover di testo

Racchiudere questo frase con l'arco inizio e di fine: , come mostrato . All'interno del tag span inizio , digitare: .

Class = " rollover "

Carica il tuo documento al server Web
Creare le regole Stylesheet

Type , tra le tag di stile nella parte superiore del documento :

span.rollover { background-color : white ; } durata : hover.rollover { background-color : yellow ; colore : Maroon ; }

in primo luogo, creare l'istruzione di rollover campata per il foglio di stile . Tipo "span ", poi un periodo , poi " rollover ", dove rollover corrisponde l'attributo di classe che è stato dato al tag span. Tale accordo prevede che il fondo tra i tag span è di colore bianco , che appare come un colore di sfondo bianco per l'utente finale .

Successivamente, creare l'arco , oltre a due punti , più un periodo , più rollover , che è la classe del tag span. L'istruzione hover significa " Quando si posiziona il puntatore del mouse sul testo all'interno del tag span , seguire queste istruzioni . " Quando i luoghi per l'utente finale il mouse sopra il testo , lo sfondo diventa giallo e il testo diventa marrone.
Creazione di un pulsante rollover

C'è una modo relativamente semplice per creare un pulsante di bell'aspetto fuori del testo sulla vostra pagina web. Basta aggiungere i seguenti attributi per l'istruzione span.rollover :

background-color : navy ; border : 5px dall'inizio bianco; font-family : Georgia; font-size : 14pt ; colore : bianco;

in primo luogo , cambiare il colore di sfondo dal bianco al blu marino . Successivamente, aggiungere l' istruzione di confine , che ha tre parti: il border-width , il - colore del bordo e gli attributi border- style . Abbiamo scelto uno , bianco , bordo dall'inizio di 5 pixel , il che significa che vi è un bianco , scatola rettangolare confinante con il contenuto del tag span che è di 5 pixel di spessore .

Cambiare il tipo di carattere per la Georgia a 14 pt . Infine , modificare il colore del font bianco , in modo che mostra contro il fondo marino . Caricare il documento sul server Web e provarlo.
Prima del Rollover

Questa è un'istantanea della pagina Web prima di inserire il vostro puntatore del mouse sul testo . Il testo è bianco e lo sfondo è blu navy .
Dopo il rollover

Questa è un'istantanea della pagina Web , mentre il puntatore del mouse si trova sopra il pulsante . Lo sfondo è giallo , e il testo è marrone.

• Come correggere un errore di sintassi 
• Quali sono le macchine a controllo numerico