Pessoal,
A Instrutora não finalizou o menu, ainda quero entender como deixar o menu em azul, quando selecionado.
Outro ponto, ao clicar nas setas direta e esquerda para visualizar os livros, deveria ter alguma ação, mas nada acontece, ela também não concluiu essa parte.
Desde já agradeço a ajuda!
Oi, Thaís, tudo bem?
Essa estilização é opcional e não afeta o resultado do projeto, mas caso queira realizar esse detalhe, podemos utilizar os seguintes comandos:
.opções__botão:checked~label>.opções__item{
background:var(--azul-degrade);
color:var(--cor-branca);
}Esse código verificará se o input com classe opções__botão foi clicado e procurará um elemento irmão desse input que possui a tag "label" por meio do sinal (~), por fim, através do sinal de maior (>) será buscado um elemento filho dentro da tag label que possui a classe opções__item e nele será aplicado um background em degradê na cor azul e uma fonte na cor branca, durante o período em que o elemento estiver clicado.
Para que cada item do submenu fique com degradê na cor azul e fonte na cor branca quando o mouse passar por cima dos elementos podemos aplicar a pseudoclasse hover da seguinte forma:
.lista-menu__item:hover{
background: var(--azul-degrade);
}
.lista-menu__item:hover>.lista-menu__link{
color: var(--cor-branca);
}Espero ter ajudado e caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Oi Rodrigo! Tudo bem sim, obrigada, e contigo?
Coloquei conforme seu poste, mas não funcionou, segue imagem de ficou lado esquerdo e de como deveria lado direito.
O nome CATEGORIAS não fica azul ao clicar e a lista fica com fundo azul e a cor da letra não muda para branco.
No carrossel, o botão não sofreu alterações.
@media screen and (min-width: 1024px)
.lista-menu__item:hover{
background: var(--azul-degrade);
}
.lista-menu__item:hover>.lista-menu__link{
color: var(--cor-branca);
}
.opções__botão:checked~label>.opções__item{
background:var(--azul-degrade);
color:var(--cor-branca);
}
Oi, Thaís, estou bem, obrigado!
Sinto muito que ainda esteja com problemas com relação ao seu código, para que eu possa simular o seu problema e te ajudar de forma mais assertiva, peço que você compartilhe o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto.
Fico no aguardo!
Rodrigo,
Vou finalizar a aula do projeto, vai que nos vídeos seguintes tenha a orientação, após isso, vou tentar fazer essas e outras modificações, caso eu não consiga o resultado, retorno com a duvida.
Obrigada!