CSS - Pseudo-classe: hover

Descrizione

La pseudo-classe : hover viene utilizzata per aggiungere un effetto speciale a un elemento quando ci si sposta sopra con il mouse.

Durante la definizione di pseudo-classi in un blocco <style> ... </style>, è necessario prestare attenzione ai seguenti punti:

  • a: hover DEVE venire dopo un: link e un: visitato nella definizione CSS per essere efficace.

  • a: active DEVE venire dopo a: hover nella definizione CSS per essere efficace.

  • I nomi delle pseudo classi non fanno distinzione tra maiuscole e minuscole.

  • Le pseudo-classi sono diverse dalle classi CSS ma possono essere combinate.

Possibili valori

  • color - Qualsiasi valore di colore valido.

Si applica a

Elemento di ancoraggio / collegamento.

Esempio

Di seguito è riportato l'esempio che dimostra come utilizzare : la classe hover per cambiare il colore dei collegamenti quando portiamo il puntatore del mouse su quel collegamento.

<html>
   <head>
      <style type = "text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>

   <body>
      <a href = "/html/index.htm">Bring Mouse Here</a>
   </body>
</html>

Questo produrrà il seguente collegamento. Ora porta il mouse su questo collegamento e vedrai che cambia colore in giallo.