Effetti interattivi sui links

Cascade style sheets
di Risorse.net

Nel passaggio precedente abbiamo visto tutti dei bellissimi stili, ma nessuno di essi era interattivo, ovvero non modificava in alcun modo a seconda delle azioni eseguite dall'utente.
I Css, come Javascript d'altronde, permette di interagire (anche se in maniera prettamente estetica) con gli eventi generati dal visitatore.
Tutti gli effetti che vedremo adesso hanno come oggetto gli hyperlink.

  • LINK NON SOTTOLINEATO
    Cominciamo eliminando la comune sottolineatura ai link ipertestuali. Sia Explorer che Netscape 4, permettono di eliminare la sottolineatura ai collegamenti. Ecco come fare.

    <STYLE>
    A:link, A:visited { text-decoration: none }
    </STYLE>



  • LINK NON SOTTOLINEATO AL PASSAGGIO DEL MOUSE
    E' uno degli effettipiu' aggrazziati tra quelli che vi presenteremo. Elimina la sottolineatura solo quando ci si passa sopra con il mouse. Invertendo i valori underline con none si otterra' l'effetto contrario.

    <STYLE>
    A:link, A:visited { text-decoration: underline }
    A:hover { text-decoration: none }
    </STYLE>



  • LINK SOPRALINEATO AL PASSAGGIO DEL MOUSE
    Essendo un effetto poco usato, potrebbe diventare la peculiarita' del vs sito web. Anche in questo caso, invertendo i valori overline e none, si otterra' un effetto opposto.
    Ecco come fare:

    <STYLE>
    A:link, A:visited { text-decoration: overline }
    A:hover { text-decoration: none }
    </STYLE>



  • LINK CON CAMBIO DI COLORE AL PASSAGGIO DEL MOUSE
    Una volta che il mouse passa sopra il link, questo cambia di colore. Il colore puo' essere espresso sia in valori esadecimali (per es. #000080) sia in inglese (navy). Ecco il codice:

    <STYLE>
    A:link, A:hover { color:navy }
    </STYLE>



  • CAMBIO DEL COLORE DI SFONDO AL PASSAGGIO DEL MOUSE
    E' possibile impostare un colore di sfondo ai link, anche solo quando si passa sopra con il mouse.

    <STYLE>
    A:link, A:hover { background:red }
    </STYLE>


    © Risorse.net (www.risorse.net)
    pagina in versione stampabile:
    http://www.risorse.net /css/interattivicss.asp?print=ok