Questão FC374844
Considere o seguinte trecho de código HTML e CSS: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
Desenvolvimento Web
Instituto Consulplan · 2024
Considere o seguinte trecho de código HTML e CSS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Questão</title>
<style>
.container {
width: 80%;
margin: 0 auto;
}
.text {
font-size: 20px;
color: blue;
text-align: center;
}
.text:hover {
color: red;
}
</style>
</head>
<body>
<div class="container">
<p class="text">Tribunal de Justiça do Estado do Maranhão</p>
</div>
</body>
</html>
Com base no código apresentado anteriormente, quando o cursor do mouse passa por cima do texto “Tribunal de Justiça do Estado do Maranhão”, o texto:
- Fica sublinhado.
- Permanece na cor azul.
- Muda para a cor vermelha.
- Muda de tamanho para 20px.
Mostrar resposta e comentário
Gabarito
Certo
Comentário do professor
O código aplica a classe .text ao parágrafo, definindo inicialmente color: blue e tamanho da fonte.
Em seguida há a regra .text:hover, que usa a pseudoclasse :hover e declara color: red.
A pseudoclasse :hover é ativada quando o cursor passa por cima do elemento; nesse instante o navegador aplica a propriedade definida em .text:hover.
Pela cascata do CSS, a regra de :hover sobrepõe a cor anterior enquanto durar o estado de passar o mouse.
Portanto, ao colocar o cursor sobre “Tribunal de Justiça do Estado do Maranhão”, o texto muda para a cor vermelha. Ao retirar o cursor, volta à cor original.
Conteúdo do catálogo FC Concursos · Atualizado em