Differenziare un link al passaggio del mouse rende spesso un sito più gradevole ed usabile. Tuttavia il mouse non è l’unico strumento con cui navigare un documento.
I dispositivi di navigazione solitamente forniscono la possibilit� di selezionare i link (e gli altri elementi) tramite sistemi alternativi al mouse. Spesso, se si sta naviganto da un PC, si tratta del tasto TAB o le frecce direzionali della tastiera.
Per evidenziare i link anche in questi casi, altre alla più diffusa pseudo classe hover applicata all’elemento Ancor, va utilizzata la pseudo classe focus. (Si veda il paragrafo The dynamic pseudo-classes: :hover, :active, and :focus delle Specifiche CSS2 del W3C per maggiori chiarimenti).
Esempio:
a:hover, a:focus{
color: ...
backgorund: ...
border-bottom: ...
ecc...
}Purtroppo attualmente Internet Explorer non interpreta focus, ma possiamo comunque ottenere un effetto simile utilizzando la pseudo classe active.
Quindi il codice per evidenziare i link selezionati, su tutti i dispositivi di navigazione con un minimo supproto dei CSS2, ed indipendentemente dallo strumento utilizzato per la selezione, è:
a:hover, a:focus, a:active{
color: ...
backgorund: ...
border-bottom: ...
ecc...
}tag: anchor, CSS, internet explorer.
post correlati:
- Effetti di attivazione per i link costituiti da immagini
- Il box model
- Il doctype switch
- L'allineamento orizzontale degli elementi XHTML con i CSS
- Firefox 2, IE7 ed i moduli di ricerca
- Filtri CSS per Opera browser
- Forzare l'aggiornamento della cache per file esterni
12 December 2005 alle 12:05
Ciao, volevo segnalare che il metodo sopra riportato funziona se utilizzato come scritto nella guida, ma non funziona in un caso del genere:
il tag a si trovi all’interno di un div con id=”prova”
#prova a:active {color:red;
}
12 December 2005 alle 12:51
In che senso non funziona?
In questa pagina il metodo è applicato e i link sono tutti dentro ad un elemento con id=”qualcosa”, eppure funziona.
In questo caso, per�²:
#id a{color: red;
}
a:hover, a:active, a:focus{
color: green;
background: yellow;
}
i link contenuti nell’elemento con id=”id” rimarranno rossi (perchÃ?© la prima dichiarazione più specifica ha il “predominio”), ma il background all’attivazione sarÃ? giallo (perchÃ?© non c’è nessuna dichiarazione più specifica in contrasto con questa).
Se si vuole far cambiare anche il colore del testo bisogna definire:
#id a:hover, #id a:active, #id a:focus{color: green;
background: yellow;
}
12 December 2005 alle 13:37
ops, ho ricontrollato meglio, avevo un’altra classe che interferiva, grazie per la risposta, senza essa sarei rimasto convinto che non c’era via.
ciao
25 September 2007 alle 09:48
[…] che abbiamo detto sinora vale per la selezione con il mouse, per la selezione con tastiera si legga Selezionare i link di un documento navigato con la tastiera. Hai trovato interessante questo articolo? Se vuoi, inscrivendoti alla newsletter, puoi ricevere […]