Como trabalhar com seletores de eventos css3

Video: Sintaxe e Seletores CSS - HTML e CSS na Prática | U2L1

A maioria das mudanças CSS3 são estáticos - você perguntar o navegador para procurar marcas específicas, atributos ou padrões. No entanto, seletores de eventos escolher objetos com base em um evento particular, como um mouse over.

Quando o utilizador coloca o ponteiro do rato sobre um objecto, alterações de formatação do objecto para significar que o evento ocorreu. Quando o utilizador move o cursor do rato fora do objecto, a formatação retorna ao normal. A lista a seguir fala sobre seletores de eventos que os documentos normalmente usam.

• :flutuar: Seleciona um objeto quando o ponteiro do mouse é passado sobre ele. Os desenvolvedores geralmente usam este recurso para mostrar que um item é selecionado ou para exibir detalhes sobre um objeto. Você vê esse recurso usado com bastante frequência com sistemas de menu para exibir os itens do submenu.

• :foco: Seleciona um objeto quando o objeto tem o foco de entrada (teclado). É normalmente utilizado com formas de mostrar que campo é seleccionada para a entrada. Um uso interessante deste seletor é mostrar o campo selecionado em uma fonte maior porte para fazer entrada mais fácil.

seletores de eventos são úteis porque você pode usá-los para fazer parecer que a página é interagir com o usuário sem escrever sequer uma linha de código. Tudo acontece como parte de um estilo. O procedimento a seguir mostra uma maneira de usar seletores de eventos para produzir um efeito visual.

1. criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.

2. Abrir ExternalCSS.CSS.

3. 
   
   
   

   Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   Video: Curso de CSS3 Aula 03 Seletor universal, Seletor tipo, Seletor atributo

   p: hover, h1: hover {text-decoration: none; font-family: "Arial", Sans-serif-font-size: xx-large-color: blueviolet-background-color: Ameixa}

4. Atualizar a página de teste.

5. Passe o mouse sobre o texto do parágrafo.

   Você vê o efeito de fazer a mudança de estilo. O estilo das alterações de texto para coincidir com os critérios de selecção.

   

6. Passe o mouse sobre o texto do cabeçalho.

   O texto do parágrafo retorna ao normal e o texto do cabeçalho agora coincide com os critérios de selecção. Você pode usar essa abordagem com qualquer objeto na tela e fazer qualquer tipo de mudança desejada.