Como alterar a cor de um div ao passar o mouse

Autor: Janice Evans
Data De Criação: 25 Julho 2021
Data De Atualização: 22 Novembro 2024
Anonim
DUAS FORMAS DE TROCAR A IMAGEM AO PASSAR O MOUSE POR CIMA - HTML & CSS
Vídeo: DUAS FORMAS DE TROCAR A IMAGEM AO PASSAR O MOUSE POR CIMA - HTML & CSS

Contente

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.


Instruções

A linguagem CSS permite aplicar truques para melhorar a interação do usuário com a página (Comstock/Comstock/Getty Images)

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

  2. Coloque o cursor em uma linha vazia entre as tags "" e "'.

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

  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. Digite "" para fechar a tag de script CSS.

  6. Coloque o cursor de texto em uma linha vazia entre as tags "" e "".

  7. Digite "" 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. Digite ou cole um conteúdo para ser incluído no DIV e pressione "Enter".

  9. Digite "" para fechar o recipiente DIV.

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