Como trabalhar com CSS3 Seletores de Eventos
A maioria das mudanças CSS3 são estáticos - você perguntar o navegador para procurar tags 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 usuário passar o ponteiro do mouse sobre um objeto, alterações de formatação do objeto para indicar que o evento ocorreu. Quando o usuário move o ponteiro do mouse para fora do objeto, a formatação retorna ao normal. A lista a seguir fala sobre seletores de eventos que os documentos comumente usados.
:flutuar: Seleciona um objeto quando o ponteiro do mouse é passado sobre ele. Os desenvolvedores geralmente usam esse recurso para mostrar que um item é selecionado ou para exibir detalhes sobre um objeto. Você vê esse recurso bastante utilizado com sistemas de menu para exibir os itens do submenu.
:foco: Seleciona um objeto quando o objeto tem o foco de entrada (teclado). É comumente usado com formulários para mostrar qual campo é selecionado 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.
Criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.
Abrir ExternalCSS.CSS.
Digite o seguinte código após os estilos existentes e salvar as alterações no disco.
p: hover, h1: hover {text-decoration: none; font-family: "Arial", sans-serif-font-size: xx-large-color: blueviolet-background-color: Ameixa}Atualizar a página de teste.
Passe o ponteiro do 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.
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.