HTML and CSS Reference
In-Depth Information
}
div:hover
{
background-color: black;
width: 600px;
color: #fff;
}
La prima classe CSS specifica le caratteristiche iniziali dell'elemento
div
, quali proprietà
CSS sono soggette a transizione e quanto dura la transizione dal vecchio al nuovo stile.
Queste ultime due caratteristiche sono specificate rispettivamente attraverso le proprietà
transition-property
e
transition-duration
.
La proprietà
transition-property
accetta la lista delle proprietà soggette a tran-
sizione, separate dalla virgola. La proprietà
transition-duration
accetta una lista di
durata delle transizioni. Se specifichiamo un solo valore, tutte le transizioni per le proprietà
specificate in
transition-property
avranno la stessa durata. Se specifichiamo più
valori (separandoli con la virgola) questi valori vengono ripetuti. Per esempio, se specifi-
chiamo quattro proprietà e due durate, la durata della transizione per la prima e la terza
proprietà sarà il primo valore specificato in
transition-duration
, mentre la durata
della transizione per la seconda e la quarta proprietà sarà il valore della seconda durata spe-
cificata in
transition-duration
.
nota
Nel nostro caso la durata è espressa in secondi attraverso il suffisso
s
. Possiamo
specificare la durata in millisecondi, utilizzando il suffisso
ms
.
La seconda classe CSS
dell'esempio 5.22
specifica i nuovi valori che devono avere le pro-
prietà soggette a transizione quando passiamo con il mouse sopra l'elemento.
La
figura 5.17
mostra la transizione specificata
nell'esempio 5.21
.
