Rollover aiutare i visitatori a siti web di sapere quando un elemento è cliccabile. Il tipo più semplice di ribaltamento è un colore evidenziato su un link di testo, ma rollover comunemente includono cambiamenti di sfondo e immagine cambia. Su un roll-bar di navigazione (o navigazione), una serie di link offre opzioni di navigazione per i visitatori, e lo sfondo di ogni collegamento cambia quando un utente muove il puntatore del mouse su di essi. Questo effetto è possibile solo con i CSS, utilizzando il: pseudo-classe per impostare l'effetto rollover "hover".

istruzione

1 Creare una nuova lista non ordinata all'interno della vostra pagina Web, mettendo il codice in cui si desidera visualizzare la vostra barra di navigazione. Rendere ogni navigazione collegare un elemento all'interno della lista:

<Ul class = "nav">
<Li> <a href="index.html"> casa </a> </ li>
<Li> <a href="about.html"> Chi siamo </a> </ li>
<Li> <a href="ourwork.html"> Nostro Lavoro </a> </ li>
<Li> <a href="contact.html"> Contattaci </a> </ li>
</ Ul>

Dare la lista non ordinata tag un nome di classe, come indicato sopra. "Nav" funziona bene perché è descrittivo e facile da ricordare. L'utilizzo di una classe vi permetterà di scrivere codice CSS che è riutilizzabile su più liste non ordinate, rendendo nav bar più possibile in una singola pagina.

2 Fare un nuovo file, vuoto e salvarlo come "nav.css." È necessario salvare il file nella stessa cartella come la pagina Web. Avviare il foglio di stile mettendo a nudo proiettili e imbottitura dalla lista non ordinata:

.nav {
list-style: none;
padding-left: 0;
}

La regola di stile sopra "seleziona" qualsiasi elemento HTML che contiene il "NAV" nome della classe.

3 ". Nav" Scrivi una regola di stile che seleziona tutti gli elementi di una lista all'interno di qualsiasi elemento con un nome di classe interna che regola di stile, impostare la proprietà "float" a "sinistra":

.nav li {
float: left;
}

Questa regola prende ogni elemento della lista non ordinata e galleggia verso sinistra. L'effetto è una fila orizzontale di collegamenti piuttosto che la lista verticale creata dai "<ul>" tag. Non è possibile aggiungere galleggianti per i collegamenti stessi, perché questo provoca un effetto di scala-like che romperà la barra di navigazione.

4 Scrivi una regola di stile per i collegamenti all'interno della barra di navigazione. Il tag per selezionare qui è "<a>" o il tag "anchor". All'interno di questa regola, impostare lo sfondo e colori di primo piano, rimuovere le sottolineature di collegamento e lo stile del carattere, se lo desideri. Aggiungere imbottitura per creare lo spazio intorno ad ogni link:

.menu un {
sfondo: blu scuro;
colore bianco;
font-weight: bold;
text-decoration: none;
padding: 5px 20px;
}

In questo esempio, il valore "5px" della proprietà "padding" imposta la spaziatura sopra e sotto ogni collegamento a cinque pixel. Il valore "20px" imposta il padding a 20 pixel a sinistra ea destra di ogni collegamento.

5 Creare una nuova regola per i collegamenti, ma aggiungere ": hover" per la "a" per definire lo stato hover:

.menu a: hover {
sfondo: darkred;
}

Lo stato "hover" è la stessa di un rollover. Quando l'utente si posiziona il suo puntatore del mouse su un link, il suo sfondo cambierà a seconda di come hai scritto la regola di stile. Nel caso di questo esempio, lo sfondo girerebbe rosso scuro. È anche possibile impostare altre proprietà utilizzando questa regola, come "colore" o "background-image".