Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Hover não funciona

Declarei o hover tanto no media query quanto fora, porém não funciona

.cabecalho_menu-hamburguer { width: 24px; height: 24px; background-image: url("../img/Menu.svg"); display: inline-block; background-repeat: no-repeat; background-position: center; }

.container__botao:checked~.container__rotulo > .cabecalho_menu-hamburguer { background-image: url(../img/Menu\ Aberto.svg); }

.container__botao:checked~.container__rotulo { background: var(--azul-degrade); }

.cabecalho { background-color: var(--branco); display: flex; justify-content: space-between; align-items: center; position: relative; }

.container { display: flex; align-items: center; }

.container__imagem { padding: 1em;

}

.lista-menu { display: none; position: absolute; top: 100%; width: 60vw; z-index: 10; }

.container__botao:checked~.lista-menu { display: block; }

.lista-menu__titulo, .lista-menu__item { padding: 1em; background-color: var(--branco); }

.lista-menu__titulo { color: var(--laranja); font-weight: 700; }

.lista-menu__link { background: var(--azul-degrade); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase; text-decoration: none; }

.container__botao { display: none; }

.container__titulo { display: none; }

.opcoes { display: none; }

.container__texto { display: none; }

.lista-menu__item:hover { background: var(--azul-degrade); }

.lista-menu__item:hover > .lista-menu__link { -webkit-text-fill-color: var(--branco); text-decoration: none; }

@media screen and (min-width: 1024px) {

.container__titulo, .container__titulo--negrito {
    font-family: var(--fonte-secundaria);
    font-size: 38px;
}

.container__titulo {
    font-weight: 400;
    display: block;
}

.container__titulo--negrito {
    font-weight: 700;
}

.opcoes {
    display: flex;
}

.opcoes__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opcoes__link {
    text-decoration: none;
    color: var(--preto);
}

.container__imagem--transparente {
    display: none;
}

.cabecalho_menu-hamburguer {
    display: none;
}

.opcoes__botao:checked~.lista-menu {
    display: block;
    width: auto;
}

.opcoes__botao {
    display: none;
}

.opcoes__botao:checked~.opcoes__rotulo > .opcoes__item {
    background: var(--azul-degrade);
    color: var(--branco);
}

.opcoes__item {
    padding: 1em 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;
}

}

@media screen and (min-width: 1728px){ .container__link { display: flex; align-items: center; text-decoration: none; color: var(--preto); }

.cabecalho {
    padding: 0 2em;
}

.opcoes {
    margin: 0 38em 0 2em;
}

.container__texto {
    display: block;
}

}

1 resposta
solução!

Olá, Tâmara. Tudo bem?

Acho que eu entendi o que pode estar acontecendo. O elemento que corresponde ao .lista-menu__item e .lista-menu__link são aqueles que ficam no menu hamburguer quando a tela está responsiva para dispositivos mobile.

Se você quer aplicar o hover no menu para dispositivos desktop, você pode usar a classe .opções__item. Inclusive, o instrutor deixou alguns códigos de exemplo caso queira testar o efeito em outros elementos do projeto:

.opções__item:hover {
    background: var(--azul-degrade);
}

.lista-rodapé__link:hover {
    color: var(--laranja);
}

.tópicos__link:hover {
    color: var(--laranja);
    background-color: var(--branco);
}

.botões__ancora:active {
    background-color: var(--azul);
}

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado