Considere o trecho de descrição de uma página Web, no qual as referências da terceira linha foram omitidas.Na linha tracejada, o texto que faz com que o botão mude de cor de fundo quando o mouse é posicionado sobre ele é:
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Pseudo-classe :hover em CSS
Gabarito: letra C. O seletor correto para mudar a cor de fundo de um botão quando o mouse passa sobre ele é .xxxxx:hover, onde xxxxx é a classe definida no HTML (que foi omitida na linha tracejada). A pseudo-classe :hover é o mecanismo do CSS para aplicar estilos quando o cursor está sobre o elemento, e a sintaxe correta é seletor:hover { propriedade: valor; }.
O CSS (Cascading Style Sheets) é a linguagem usada para estilizar páginas web, controlando cores, fontes, espaçamentos e layout. A sintaxe básica de uma regra CSS consiste em um seletor (que indica a qual elemento o estilo se aplica) e um bloco de declarações (que contém as propriedades e valores). Para criar interações com o usuário, como mudar a cor de um botão quando o mouse passa sobre ele, utilizamos as pseudo-classes. Uma pseudo-classe é uma palavra-chave adicionada a um seletor que especifica um estado especial do elemento. A pseudo-classe :hover é aplicada quando o usuário posiciona o cursor do mouse sobre o elemento, sem precisar clicar. É uma ferramenta fundamental para criar feedback visual e melhorar a experiência do usuário em interfaces web.
A sintaxe para usar :hover é sempre seletor:hover, onde seletor pode ser um elemento (como button), uma classe (como .minha-classe), um ID (como #meu-botao) ou qualquer outro seletor válido. No caso da questão, o botão tem uma classe definida no HTML, e o texto omitido na linha tracejada deve ser exatamente o seletor que combina com essa classe, seguido de :hover. As alternativas que usam hover: sem o seletor antes (como hover:b1) estão incorretas, pois essa não é a sintaxe do CSS. A alternativa que usa button:hover só funcionaria se o botão fosse um elemento <button> sem classe específica, mas o enunciado indica que há uma classe (representada por xxxxx). Portanto, a resposta correta é a que usa o seletor de classe com :hover.
A pegadinha desta questão está em reconhecer que o seletor deve corresponder à classe do elemento HTML, que foi omitida. O candidato pode ser tentado a escolher button:hover por ser um seletor de elemento comum, mas a questão especifica que há uma classe. A alternativa hover:b1 parece uma tentativa de imitar a sintaxe de outras linguagens ou frameworks, mas não é CSS válido. A chave é entender que :hover é uma pseudo-classe que se anexa a um seletor, e que o seletor deve ser a classe do botão.
Pseudo-classe :hover: Sintaxe correta (seletor:hover, Ex.: .classe:hover); Estados especiais (Mouse sobre o elemento, Sem clique); Seletores válidos (Elemento (button), Classe (.minha-classe), ID (#meu-botao)); Erros comuns (hover:seletor (invertido), Seletor sem ponto para classe)
Alternativa A — ❌ Incorreta
O seletor .b1:hover está sintaticamente correto, mas a classe b1 não é a classe do botão na página. O enunciado diz que as referências da terceira linha foram omitidas, e a classe real do botão é representada por xxxxx. Portanto, usar b1 não faria o estilo ser aplicado ao botão correto.
Alternativa B — ❌ Incorreta
O seletor .button:hover também é sintaticamente válido, mas button é um seletor de elemento, não de classe. Para usar um seletor de classe, é necessário o ponto (.) antes do nome. Além disso, a classe do botão não é button, mas sim xxxxx. Usar button:hover só funcionaria se o botão fosse um elemento <button> sem classe, o que não é o caso.
Alternativa C — ✅ Correta ⟵ GABARITO
O seletor .xxxxx:hover é o correto, pois xxxxx representa a classe do botão no HTML. A sintaxe .classe:hover é a forma padrão de aplicar estilos a um elemento com uma classe específica quando o mouse está sobre ele. Como a classe foi omitida no enunciado, xxxxx é o placeholder que a representa, e a alternativa usa exatamente essa classe com a pseudo-classe :hover.
Alternativa D — ❌ Incorreta
A sintaxe hover:b1 está incorreta. Em CSS, a pseudo-classe :hover deve ser anexada a um seletor com dois pontos, não com dois pontos após o nome da pseudo-classe. A forma correta seria seletor:hover, e não hover:seletor. Além disso, b1 não é a classe do botão.
Alternativa E — ❌ Incorreta
Assim como a alternativa D, hover:button tem a sintaxe invertida. A pseudo-classe :hover deve vir depois do seletor, e não antes. Além disso, button é um seletor de elemento, não de classe, e não corresponde à classe do botão.
Gabarito: letra C — o seletor .xxxxx:hover é o único que combina a sintaxe correta da pseudo-classe :hover com a classe do botão, que é representada por xxxxx.
Na linha tracejada, o texto que faz com que o botão mude de cor de fundo quando o mouse é posicionado sobre ele é: