Summary  
This chapter explains how to use the CSS :hover pseudo-class to apply dynamic style changes to elements when the mouse pointer hovers over them.  

General domain of usage  
Web user interfaces

Watch this demonstration to see how the :hover pseudo-class changes the appearance of buttons and links when you move your mouse over them. You'll observe how CSS hover effects provide instant visual feedback and enhance user interaction. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

Elementos da web podem responder à interação do usuário. Uma das interações mais comuns é passar o mouse sobre um elemento.

No CSS, isso é controlado usando a pseudo-classe `:hover`.

## O que é `:hover`?

A pseudo-classe `:hover` aplica estilos quando o usuário posiciona o ponteiro do mouse sobre um elemento.

Sintaxe básica:
```css
selector:hover {
  property: value;
}
```
Exemplo:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uIGNsYXNzPSJwcmltYXJ5LWJ1dHRvbiI+Q2xpY2sgTWU8L2J1dHRvbj4KICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJzdHlsZWQtbGluayI+TGVhcm4gTW9yZTwvYT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoucHJpbWFyeS1idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5wcmltYXJ5LWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogbmF2eTsKfQoKLnN0eWxlZC1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5zdHlsZWQtbGluazpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5OwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5wcmltYXJ5LWJ1dHRvbiB7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9Cgouc3R5bGVkLWxpbmsgewogIGNvbG9yOiBibHVlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRyYW5zaXRpb246IHRleHQtZGVjb3JhdGlvbiAwLjNzIGVhc2U7Cn0=

Quando o usuário passa o mouse sobre o botão, a cor de fundo muda. Quando o cursor está sobre o link, o link fica sublinhado.

`:hover` funciona na maioria dos elementos HTML. Ele só é ativado quando o ponteiro está sobre o elemento.

Nota

## Por que os efeitos de hover são importantes

Os efeitos de hover melhoram a experiência do usuário, fornecem feedback visual e tornam as interfaces mais interativas.

Eles são comumente usados em links (`<a>`) e botões, assim como em menus de navegação.

Domine os fundamentos do CSS, a linguagem de estilização que transforma a aparência e a experiência visual das páginas web. Explore conceitos essenciais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas.

Compreenda como o CSS se conecta ao HTML e como os estilos são aplicados por meio de seletores. Aplicação de cores, estilização de texto e efeitos de hover para controlar a apresentação visual.

Aprimoramento da tipografia utilizando altura de linha, espaçamento, propriedades de fonte e fontes personalizadas. Controle de famílias tipográficas, peso, estilo e tamanho da fonte para melhor legibilidade.

Controle da estrutura do layout utilizando propriedades de margem, preenchimento, bordas e largura. Compreensão do comportamento do dimensionamento da caixa e dos tipos de exibição de elementos, como block, inline e inline-block.

Controle layouts horizontais e verticais utilizando propriedades do Flexbox. Ajuste direção, alinhamento e espaçamento para estruturar componentes de interface de usuário.

Aprimoramento de layouts utilizando cores de fundo, imagens, pseudo-elementos e sombras. Estilização de componentes visuais para profundidade e contraste.

Adicionando Efeitos de Hover

O que é :hover?

Por que os efeitos de hover são importantes

O que é `:hover`?