Cascading Style Sheets, o CSS, è ideale per realizzare rollover perché usa meno codice rispetto ai linguaggi tradizionali, come JavaScript, e lavora a tutti i principali browser. Tuttavia, le regole di stile rollover possono talvolta mancare attributi essenziali o hanno sbagliato a scrivere la sintassi che rende le immagini rollover e il testo non apparirà. Date un'occhiata al vostro codice per risolvere i problemi CSS e correggere errori comuni al fine di rendere il vostro display rollover giusto.

istruzione

1 Avviare un programma di editor di testo e aprire il documento che contiene il codice CSS rollover.

2 Controllare lo stile CSS che contiene l'indirizzo URL per l'immagine di rollover per vedere il motivo per cui non viene visualizzato. Verificare che l'indirizzo sia corretto - ". Rollover.gif", per esempio, "immagini / rollover.gif" invece di Assicurarsi che la sintassi CSS viene inserito in modo appropriato, come nel seguente esempio:

rollover {background-image: url ( 'images / rollover.gif'); }

3 Verificare di avere l'attributo di visualizzazione assegnato a "blocco" in modo che il testo rollover non viene visualizzato con un rientro non intenzionale. Per esempio:

rollover {display: block; }

4 Guardate la larghezza e l'altezza attributi nel vostro stile per assicurarsi che le dimensioni rollover vengono visualizzati come si desidera. Per esempio:

rollover {width: 105px; Altezza: 20px; }

5 Assicurarsi di avere una regola di stile hover separato per garantire qualcosa eseguita quando l'utente posiziona il suo mouse sopra il rollover. attributi comuni includono gli stili per il posizionamento di sfondo o il colore. Inserire il nome del dominio di ribaltamento, come ad esempio "#rollover," e seguire questo con ": hover" in questo modo:

rollover: hover {inserire i attributi qui}

6 Rivedere il codice HTML per assicurarsi che il contenuto di rollover designato ha la ID CSS assegnato, che applica le regole di stile. A tale scopo, facendo in modo "id =" seguito dal nome della regola di stile CSS è nel tag di apertura, come in questo esempio:

<a id="rollover" href="URL address"> Rollover Testo </a>

7 Salvare il documento e visualizzarlo in anteprima nel browser Web per assicurarsi che il rollover funziona.

8 Caricare il file sul tuo host web per pubblicare le tue correzioni.

Consigli e avvertenze

• Un rollover è un'immagine che scambia la sua immagine quando un visitatore si libra il suo mouse su di esso per farle sapere a cliccare questa funzione. L'immagine iniziale del ribaltamento è noto come lo stato di "riposo", e l'immagine si trasforma in è stato "hover".
• Un metodo comune per la creazione di immagini CSS rollover è quello di rendere il riposo e librarsi immagini un'unica immagine GIF in. Strato stato hover sotto stato di riposo in modo che appaiano uno sopra l'altro.