[Dúvida] Dificuldade em js

Olá Nathalia!

No seu código o erro acontece porque o método querySelectorAll para selecionar os elementos, resultando em uma NodeList em vez de um único elemento. Isso dificultava a manipulação direta dos estilos, pois o método style não podia ser aplicado diretamente em uma NodeList.

Além disso, não havia uma iteração adequada sobre os elementos selecionados. Isso significava que a função não era aplicada corretamente a cada elemento individualmente, comprometendo a funcionalidade esperada.

Outro problema era que a condição if e else tinha o mesmo comportamento em ambos os casos, sempre definindo o estilo para "block". Isso resultava em uma mudança de estilo inconsistente, independentemente do estado atual do elemento.

Uma maneira de abordar este problema seria verificar se o mouse passou por cima de categorias ou não. Se passou, sub-lista vira display:block ; se o mouse sair de cima, ele some(display:none). A lógica pode parecer um pouco complexa neste primeiro momento, mas fornecerá liberdade no seu código.

Observe como ficou:

let categorias = document.querySelectorAll(".categorias");

categorias.forEach(categoria => {
    categoria.addEventListener("mouseover", function() {
        let subLista = this.querySelector(".sub-lista");
        subLista.style.display = "block";
    });

    categoria.addEventListener("mouseout", function() {
        let subLista = this.querySelector(".sub-lista");
        subLista.style.display = "none";
    });
});

Em resumo, usei o método forEach para iterar sobre todos os elementos com a classe "categorias", adicionando um ouvinte de eventos de mouseover e mouseout a cada um. Dentro desses ouvintes de eventos, encontrei o elemento ".sub-lista" dentro do elemento "categorias" atual usando querySelector. Em seguida, defini a propriedade display do elemento ".sub-lista" como "block" no evento mouseover e como "none" no evento mouseout. Essas ações garantem que a lista de subcategorias seja exibida quando o mouse passar sobre a categoria correspondente e ocultada quando o mouse sair dela.

É uma maneira mais complexa, mas observe que fica mais simples o código, e menos verboso.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!