Como alterar a cor de um div ao passar o mouse

Escrito por chris hoke | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como alterar a cor de um div ao passar o mouse
A linguagem CSS permite aplicar truques para melhorar a interação do usuário com a página (Comstock/Comstock/Getty Images)

As etiquetas DIV (uma abreviação de "divisão") definem uma seção de um documento HTML e são frequentemente utilizadas com a linguagem CSS para criar o layout básico de um site. Um DIV pode ser personalizado usando CSS para definir as margens, espaçamentos, bordas, tamanho do texto, alinhamento ou cor de fundo, além de truques mais avançados, como alterar a cor do DIV quando um usuário passar o cursor do mouse sobre ele.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o documento da sua página da web em um editor de texto.

  2. 2

    Coloque o cursor em uma linha vazia entre as tags "<HEAD>" e "</HEAD>".

  3. 3

    Digite "<style type='text/css'>" e pressione "Enter". Com isso você começará a criar um script CSS.

  4. 4

    Digite "#div1:hover {background-color:#ff0000;}" e pressione "Enter". Com isso você personalizará um recipiente DIV com o valor "div1" como propriedade ID usando a cor de fundo "#ff0000" (um valor hexadecimal) quando o estado "hover" for ativado, o que acontecerá quando o cursor do mouse for colocado sobre o DIV. Esses valores de ID e de cor de fundo poderão ser alterados se for preciso.

  5. 5

    Digite "</style>" para fechar a tag de script CSS.

  6. 6

    Coloque o cursor de texto em uma linha vazia entre as tags "<BODY>" e "</BODY>".

  7. 7

    Digite "<DIV ID='div1'>" e pressione "Enter" para criar um recipiente DIV com o valor de ID "div1". Se você tiver alterado o nome da ID no passo 4, deverá colocar o mesmo nome aqui.

  8. 8

    Digite ou cole um conteúdo para ser incluído no DIV e pressione "Enter".

  9. 9

    Digite "</DIV>" para fechar o recipiente DIV.

  10. 10

    Clique em "File" (Arquivo) e em "Save" (Salvar) para salvar o documento.

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