Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
In CSS le pseudoclassi dinamiche rispondono ad azioni compiute dall’utente, vediamo la pseudoclasse dinamica :hover.
La pseudoclasse dinamica :hover risponde al posizionamento del mouse sopra ad un oggettoVediamo il codice:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <style type="text/css"> a.esempio:hover {font-size:200%;color:#FF0000;background-color:yellow;} /* si applica a tutti i link con classe esempio */ </style> </head> <body> <a class="esempio" href="#">Questo è un link con una regola :hover applicata</a> </body> </html>
Il risultato qui sotto; provare a posizionare il puntatore del mouse sopra il testo per vedere l’effetto finale:
Questo è un link con una regola :hover applicata
La sintassi della regola CSS:
a.esempio:hover {font-size:200%;color:#FF0000;background-color:yellow;} -> oggetto:hover{regola di stile}
Assegnata in body a:
a class=”esempio” href=”#”…