Solucionado
nos testes com o dev tools o hover só funcionou quando cliquei nas opções.
.opcoes__botao:checked ~ .opcoes__rotulo > .opcoes__item{
background: var(--azul-degrade);
color: var(--branco);
}
.opcoes__item{
padding: 2em 1em;
}
.lista-menu__item:hover{
background: var(--azul-degrade);
}
.lista-menu__item:hover > .lista-menu__link{
-webkit-text-fill-color: var(--branco);
text-decoration: none;
}
Oi, Rafael, tudo bem?
O estilo aplicado aohover aparece apenas quando clicado, pois dentro do Dev Tools o botão Toggle device toolbar (em português, "Alternar barra de ferramentas do dispositivo") representado por um ícone de computador está clicado, fazendo com que seja possível alterar o tamanho de visualização da tela para dispositivos móveis e tablets. Para que os estilos aplicados ao hoversejam mostrados com o passar do mouse por cima das opções, devemos clicar nesse ícone que fica no canto superior esquerdo doDev Tools para desabilitá-lo, dessa forma, veremos a tela apenas para desktop.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
