Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Aplicar Pseudo-Classes de Ação do Usuário | Introdução ao CSS
Fundamentos de CSS

bookDesafio: Aplicar Pseudo-Classes de Ação do Usuário

Tarefa

Temos um site corporativo com informações de contato na seção do cabeçalho. O objetivo é implementar uma alteração de cor quando o usuário passar o mouse sobre os links na seção do cabeçalho.

Etapas:

  1. Selecionar todos os elementos a com a classe header-link.
  2. Utilizar a pseudo-classe apropriada para o efeito de hover.
  3. Aplicar a propriedade color com o valor blue quando os links estiverem com o mouse sobre eles.
index.html

index.html

index.css

index.css

copy
  • Utilizar o . e o nome da classe para selecionar um elemento pelo nome da classe.
  • Utilizar a pseudo-classe :hover para reagir ao passar do cursor do mouse.
index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 7

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me how to write the CSS selector for the hover effect?

What does the final CSS code look like for this task?

Can you explain how the :hover pseudo-class works in this context?

Awesome!

Completion rate improved to 2.56

bookDesafio: Aplicar Pseudo-Classes de Ação do Usuário

Deslize para mostrar o menu

Tarefa

Temos um site corporativo com informações de contato na seção do cabeçalho. O objetivo é implementar uma alteração de cor quando o usuário passar o mouse sobre os links na seção do cabeçalho.

Etapas:

  1. Selecionar todos os elementos a com a classe header-link.
  2. Utilizar a pseudo-classe apropriada para o efeito de hover.
  3. Aplicar a propriedade color com o valor blue quando os links estiverem com o mouse sobre eles.
index.html

index.html

index.css

index.css

copy
  • Utilizar o . e o nome da classe para selecionar um elemento pelo nome da classe.
  • Utilizar a pseudo-classe :hover para reagir ao passar do cursor do mouse.
index.html

index.html

index.css

index.css

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 7
some-alt