Como alterar o efeito de rollover no CSS

Escrito por cristina puno | Traduzido por francisco de castro
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alterar o efeito de rollover no CSS
Os efeitos de sobreposição são ativados pelo ponteiro do mouse (Comstock/Comstock/Getty Images)

O CSS (Cascading Style Sheet, em português: "Folha de estilo em cascata") torna mais fácil criar efeitos interativos em uma página web. Um dos efeitos mais populares é o "rollover" (sobreposição), ou "mouse-over" (sobreposição do mouse), onde um determinado texto ou imagem de um site sofre alterações quando o ponteiro do mouse passa sobre ele. Esse efeito é conseguido através da utilização do "hover selector" (seletor hover) no CSS. Quando o "hover" é definido, ele pode ser usado para trocar as cores e imagens de fundo, bem como o aparecimento de fonte quando um ponteiro do mouse passa sobre ele.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o seu arquivo CSS em um editor no bloco de notas.

  2. 2

    Localize o texto "hover" utilizando a ferramenta de busca do bloco de notas ou pressionando "Ctrl + F" no teclado.

  3. 3

    Substitua o efeito de sobreposição alterando os valores dentro do elemento "hover". Por exemplo, se quiser que o efeito de sobreposição de links mude o texto para negrito, use o seguinte CSS:

    a:hover { font-weight:bold; }

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