Como mudar a cor de um link de acordo com as ações do cursor do mouse

Escrito por jay leon | Traduzido por weber figueiredo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como mudar a cor de um link de acordo com as ações do cursor do mouse
As cores identificam diferentes tipos de links em uma página da internet (Internet hyperlink image by Star from Fotolia.com)

Nenhuma página da internet está completa sem hiperlinks. Com HTML e CSS, é possível definir as cores para cada tipo de link em uma página: visitado, não visitado, com o cursor em cima (hover) e ativo. As cores "hover" não são apenas decorativas. Mudar a cor de um link conforme o cursor passa sobre ele ajuda o leitor a navegar pela página e seguir os links que ele gosta rapidamente.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

    Criando as cores dos links

  1. 1

    Abra um editor de texto. É possível usar um editor básico como o Bloco de Notas. Salve o arquivo como "style.css" no seu computador, na mesma pasta em que estão os arquivos do site.

  2. 2

    Faça declarações CSS para as cores de hiperlink usando as pseudoclasses "anchor" (âncora) como segue. Use nomes de cores (como mostrado abaixo), valores hexadecimais ou valores RGB. Note que a ordem das declarações é necessária para o funcionamento correto.

    a:link {color:red;} a:visited {color:blue;} a:hover {color:green;} a:active {color:white;}

  3. 3

    Adicione comentários, para ajudar a lembrar qual pseudoclasse se aplica a qual tipo de link na página.

    a:link {color:red;} / Este é um hiperlink comum. / a:visited {color:blue;} / Este é um hiperlink visitado. / a:hover {color:green;} / Isto muda a cor do link quando o cursor do mouse passa sobre ele / a:active {color:white;} / Isto é a cor do link quando ele for clicado. /

  4. 4

    Salve a folha de estilo. Abra a página da internet e vincule-a à folha de estilo. Insira o seguinte código entre as tags HEAD, <head> e </ head>.

    <link rel="stylesheet" type="text/css" href="style.css" />

    Usando as cores dos links

  1. 1

    Abra um navegador de internet, como o Firefox. Certifique-se de que ele esteja configurado para permitir que páginas da web exibam as suas próprias cores, em vez das próprias do navegador ou do sistema. No Firefox, por exemplo, vá ao menu "Ferramentas", "Opções", "Conteúdo" e depois em "Cores". Marque a caixa que diz "Permitir que as páginas escolham suas próprias cores".

  2. 2

    Navegue até a página da internet que deseja visualizar. Procure um hiperlink na página.

  3. 3

    Arraste o mouse sobre um hiperlink. Quando o cursor estiver passando sobre o link, a cor dele deverá mudar para a cor definida na folha de estilo. Se não houver mudança de cor, poderá haver erro no código ou o navegador estar configurado para ignorar as cores das páginas da web.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível