Questão de Programação — Programação de front end — INSTITUTO AOCP 2025

Pseudoclasses CSS: :hover e as demais opções

Gabarito: letra D. A pseudoclasse :hover é a responsável por aplicar estilos quando o usuário passa o cursor (mouse) sobre um elemento — exatamente o que o enunciado descreve. As demais alternativas (:disabled, :empty, :required, :checked) são pseudoclasses que se referem a estados ou condições diferentes, como veremos a seguir.

As pseudoclasses em CSS são seletores que permitem aplicar estilos a elementos com base em estados ou condições que não podem ser representados apenas pelos seletores simples (como classe, id ou elemento). Elas começam com dois-pontos (:) e são fundamentais para criar interfaces dinâmicas e interativas sem a necessidade de JavaScript. O :hover é uma das mais utilizadas, pois permite, por exemplo, mudar a cor de um botão quando o mouse passa sobre ele, melhorando a experiência do usuário.

A sintaxe básica é:

a:hover {
  color: red;
}

Nesse exemplo, todos os links (<a>) terão a cor vermelha quando o cursor estiver sobre eles. O :hover pode ser aplicado a qualquer elemento HTML, não apenas a links, e é amplamente usado em menus, botões, cards e outros componentes interativos.

É importante distinguir o :hover de outras pseudoclasses de interação, como :active (aplicada no momento do clique) e :focus (aplicada quando o elemento recebe foco, por exemplo, via teclado). Enquanto :hover depende do cursor do mouse, :focus é acionado por navegação por teclado ou clique em campos de formulário. Essa distinção é frequentemente cobrada em provas, pois a banca pode trocar os termos para confundir o candidato.

Além disso, as pseudoclasses podem ser divididas em categorias: as de interação (como :hover, :active, :focus), as estruturais (como :first-child, :nth-child), as de formulário (como :disabled, :checked, :required) e as de estado (como :empty). Cada uma tem uma finalidade específica, e o conhecimento dessas categorias ajuda a identificar rapidamente a resposta correta em questões como esta.

Agora, vamos analisar cada alternativa, destacando o erro específico de cada uma e o conceito correto que ela distorce.

Alternativa A — ❌ Incorreta

A pseudoclasse :disabled é utilizada para estilizar elementos de formulário que estão desabilitados, ou seja, que não podem ser editados ou enviados. Ela não tem relação com a ação de passar o mouse sobre o elemento. O erro aqui é confundir um estado de formulário com uma interação do usuário. O :disabled é aplicado, por exemplo, a um campo <input> com o atributo disabled, e o estilo é aplicado enquanto o elemento estiver nesse estado, independentemente de o cursor estar sobre ele.

Alternativa B — ❌ Incorreta

A pseudoclasse :empty seleciona elementos que não possuem nenhum filho, ou seja, que estão completamente vazios (sem texto, sem elementos filhos, sem espaços em branco). Ela é uma pseudoclasse estrutural, não uma pseudoclasse de interação. O erro aqui é associar uma condição estrutural do documento a uma ação do usuário. Por exemplo, p:empty selecionaria parágrafos que não contêm nenhum conteúdo.

Alternativa C — ❌ Incorreta

A pseudoclasse :required é aplicada a elementos de formulário que possuem o atributo required, indicando que o campo é de preenchimento obrigatório. Ela é usada para estilizar campos obrigatórios, mas não tem relação com a passagem do cursor. O erro é confundir uma validação de formulário com uma interação do usuário. O :required é frequentemente usado em conjunto com :valid e :invalid para fornecer feedback visual sobre a validação.

Alternativa D — ✅ Correta ⟵ GABARITO

A pseudoclasse :hover é exatamente a que aplica estilos quando o usuário passa o cursor sobre o elemento. Ela é uma das pseudoclasses de interação mais conhecidas e utilizadas em CSS. O enunciado descreve precisamente essa condição: "quando o usuário passa o cursor sobre o elemento". Portanto, a alternativa D está correta.

Alternativa E — ❌ Incorreta

A pseudoclasse :checked é aplicada a elementos de formulário que estão marcados ou selecionados, como checkboxes (<input type="checkbox">) e radio buttons (<input type="radio">). Ela é usada para estilizar elementos que estão no estado "marcado", mas não tem relação com a passagem do cursor. O erro é confundir um estado de seleção com uma interação de mouse. O :checked é frequentemente utilizado em conjunto com :hover para criar efeitos visuais em elementos selecionáveis.

Gabarito: letra D