CSS - Pseudo-classe: hover

Descrição

A pseudo classe : hover é usada para adicionar um efeito especial a um elemento quando você passa o mouse sobre ele.

Ao definir pseudo-classes em um bloco <style> ... </style>, os seguintes pontos devem ser tomados cuidado -

a: hover DEVE vir depois de um: link e a: visitado na definição CSS para ser eficaz.
a: active DEVE vir após a: hover na definição de CSS para ser eficaz.
Os nomes das pseudoclasses não diferenciam maiúsculas de minúsculas.
As pseudo classes são diferentes das classes CSS, mas podem ser combinadas.

Valores possíveis

color - Qualquer valor de cor válido.

Aplica-se a

Elemento âncora / link.

Exemplo

A seguir está o exemplo que demonstra como usar : hover class para alterar a cor dos links quando colocamos o ponteiro do mouse sobre o link.

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

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

Isso produzirá o seguinte link. Agora você passa o mouse sobre este link e verá que ele muda de cor para amarelo.

↰ Previous page