MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
CSS tip #5 - Menu con :hover
L'interattività si sa, è una questione che va lasciata a linguaggi come Javascript e PHP, tuttavia i CSS ci permettono di mettere mano a piccole interazioni a livello visuale, grazie al parametro :hover possiamo definire una regola Css che viene applicata all'oggetto solo quando il mouse si posiziona sopra di esso.
Anche se possiamo ottenere gli stessi effetti , o anche di migliori, tramite linguaggi di script, ricorrere alla parametro :hover ci permette di dipendere un po meno da questi ultimi e di realizzare "anteprime" di pagine web con un minimo di effetti in breve tempo.
Un'anteprima del risultato lo potete vedere in questo esempio.
Sottolineatura e cambio di colore al passaggio
Il primo e più gettonato effetto in :hover dei Css è la sottolineatura dei link che appare al passaggio del mouse. La realizzazione di questo effetto è molto semplice e con la stessa logica si possono applicare altri parametri come il cambio di colore o di dimensione dei font..testo a {
color: #09F;
text-decoration: none;
}
.testo a:hover {
color: #FFF;
text-decoration: underline;
}
Praticamente con la prima regola definiamo l'aspetto base del link, creado un duplicato della regola e aggiungendoci alla fine ":hover" possiamo definire la visualizzazione del link al momento in cui il cursore del mouse si posizionerà sopra di esso.
E lo sfondo?
Se invece volete realizzare un qualcosa di visivamente più attraente, si può fare in modo che al passaggio del mouse su un determinato elemento cambi colore oltre che al testo anche lo sfondo. In questo caso ho aggiunto una regola che va a intervenire su li:hover , semplicemente cambiando il colore di sfondo e del testo (in questo caso li ho invertiti rispetto allo stato normale) a aggiungo lo stile che trasforma il puntatore del mouse:.provamenu1 li:hover {
color: #1A64FC;
background-color: #FFF;
cursor: pointer;
}
notate che a questo punto non ho ancora definito il link nell'html... il problema è che se mettessi questo stile sull'elemento <a> avremmo l'effeto :hover applicato solo ed esclusivamente nell'area di quel preciso tag, quindi cambierebbe colore si il testo, ma solo lo sfondo intorno ad esso e non in tutta la riga come avviene invece in questo esempio. Per ovviare il problema rendiamo cliccabile e linkabile l'oggetto tramite una banale riga di "classico" Javascript:
<li onclick="location.href='http://www.moebiusmania.net/';">Voce di menu #1</li>dove dopo .href=' e prima di ';" inserite l'indirizzo che vi serve di linkare da quella voce. Piccola nota: questa riga di Javascript può essere applicata anche ai <div>!