Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Hover nos elementos da categoria

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Evoluindo o header

por Priscilla Arrais Deliami Dastre
| 22.9k xp | 10 posts

No figma, da pra ver que tem um hover em degrade quando (imagino) se passa o mouse me cima do elemento. Como a professora não criou isso, tentei fazer sozinha.

Porém, a pseudo-classe hover está funcionando como click no meu CSS. Ela só aparece a alteração se eu clico no elemento, e não muda a cor da fonte.

<ul class="cabecalho__opcoes">
            <input type="checkbox" id="opcoes-menu" class="opcoes__botao">
            <label for="opcoes-menu">
                <li class="opcoes__item">CATEGORIAS</li>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__item lista-menu__hover">
                    <a href="#" class="lista-menu__link">PROGRAMAÇÃO</a>
                </li>
                <li class="lista-menu__item lista-menu__hover">
                    <a href="#" class="lista-menu__link">FRONT-END</a>
                </li>
                <li class="lista-menu__item lista-menu__hover">
                    <a href="#" class="lista-menu__link">INFRAESTRUTURA</a>
                </li>
                <li class="lista-menu__item lista-menu__hover">
                    <a href="#" class="lista-menu__link">BUSINESS</a>
                </li>
                <li class="lista-menu__item lista-menu__hover">
                    <a href="#" class="lista-menu__link">DESIGN & UX</a>
                </li>
            </ul>

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

    .cabecalho {
        padding: 0 2em;
    }


    .container__texto {
        display: block;
        color: black;

    }

    .container__item {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .cabecalho__opcoes {
        margin-right: auto;
    }

    .lista-menu__hover:hover {
        background-color: var(--azul);
        color: white;
    }

}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas
por SARAH CRISTINA BATISTA DOS SANTOS
| 887.8k xp | 2113 posts
Alura Scuba Team Monitor/ fórum

Olá, Priscilla!

Para o problema da cor da fonte não mudar com o :hover, é importante verificar se a cor está sendo aplicada corretamente. No seu CSS, você está alterando a cor de fundo e a cor da fonte para os itens da lista quando passa o mouse sobre eles. Certifique-se de que não há outras regras CSS com maior especificidade ou que estejam sobrescrevendo essa regra.

Aqui está um exemplo de como você poderia estruturar o CSS para mudar a cor de fundo e a cor da fonte com o :hover:

.lista-menu__item:hover .lista-menu__link {
    background-color: var(--azul);
    color: white;
}

Nesse exemplo, quando o usuário passa o mouse sobre um .lista-menu__item, o .lista-menu__link dentro desse item terá sua cor de fundo e cor da fonte alteradas.

Se mesmo assim o problema persistir, sugiro verificar se não há outros estilos ou scripts que possam estar interferindo no comportamento esperado do :hover. Além disso, teste o comportamento em diferentes navegadores para garantir que não seja uma questão de compatibilidade.

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

por Priscilla Arrais Deliami Dastre
| 22.9k xp | 10 posts

Aqui não funcionou o código, a mudança de cor some completamente. Testei no Firefox, e não aparece nenhuma mudança. Não sei o que pode ser, pois fiz o mesmo código que a professora nos vídeos. Coloquei o código todo no Github

https://github.com/pdastre/alurabook

por Eduardo Augusto Martins Pozzi
| 88.8k xp | 43 posts

Boa noite Priscilla.

Pelo que vi no seu código, no CSS para o seu hover não adicione o ~. Como a Sarah demonstrou acima.

Para o ~ funcionar no CSS os dois elementos devem ter o mesmo 'pai' no html, e no caso que estamos fazendo, o elemento com a classe lista-menu__link é filho do elemento lista-menu__item e por isso só de colocar na frente o CSS ja reconhece que deve aplicar o estilo no filho.

Você pode ver mais sobre CSS selectors aqui: https://www.w3schools.com/cssref/css_selectors.php

Também tive esse problema de colocar o ~ e não entendia pq não funcionava.