Entrar Ainda não tem acesso?
3
respostas

[Bug] Meus links estão transparentes ao passar o mouse na versão tablet

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Pseudo-classes e combinadores

por Letícia Farjoni
| 25.3k xp | 15 posts

Eu fiz o hover com o azul degradê, mas o fundo dos links ficou transparente ao passar o mouse.

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

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

.container_titulo,
.container_titulo-negrito {
    font-family: var(--fonte-secundario);
    font-size: 30px;
    }

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

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

.opções {
    display: flex;
}

.opções__item {
    padding: 0 1em;
    text-transform: uppercase;
}

.opções__link {
    text-decoration: none;
    color: var(--preto);
}

.container__imagem-transparente{
    display: none;
}

.cabeçalho__menu-hamburguer {
    display: none;
}

.opções__botão:checked~.lista-menu {
    display: block;
    width: auto;
}

.opções__botão {
    display: none;
}

.opções__botão:checked~.opções__rotulo>.opções__item {
    background: var(--azul-degrade);
    color: var(--branco);
}

.opções__item {
    padding: 2em 1em;
}

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

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

}
3 respostas
por Thiago Alves Ballalai de Carvalho
| 42k xp | 9 posts

Olá,

Compartilha também o trecho do código html referente a esse menu por favor.

por Letícia Farjoni
| 25.3k xp | 15 posts

Bom dia, claro!

<header class="cabeçalho">
            <div class="container">
                <input type="checkbox" id="menu" class="container__botao">
                <label for="menu" class="container__rotulo">
                    <span class="cabeçalho__menu-hamburguer container__imagem"></span>
                </label>
                <ul class="lista-menu">
                    <li class="lista-menu__titulo">Categorias</li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Programação</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Front-end</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Infraestrutura</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Business</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Design & UX</a>
                    </li>
                </ul>
                <img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
                <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Books</h1>
</div>
            </div>

            <ul class="opções">
                <input type="checkbox" id="opções-menu" class="opções__botão">
                <label for="opções-menu" class="opções__rotulo">
                    <li class="opções__item">Categorias</li>
                </label>
                
                <ul class="lista-menu">
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Programação</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Front-end</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Infraestrutura</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Business</a>
                    </li>
                    <li class="lista-menu__item">
                        <a href="#" class="lista-menu__link">Design & UX</a>
                    </li>
                </ul>

                <li class="opções__item"><a href="#" class="opções__link">Favoritos</a></li>
                <li class="opções__item"><a href="#" class="opções__link">Minha estante</a></li>
            </ul>

            <div class="container">
                <a href="#">
                    <img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem container__imagem-transparente">
                </a>
                <a href="#" class="container__link">
                    <img src="img/Compras.svg" alt="Carrinhos de compras" class="container__imagem">
                    <p class="container__texto">Minha sacola</p>
                </a>
                <a href="#" class="container__link">
                    <img src="img/Usuario.svg" alt="Meu perfil" class="container__imagem">
                    <p class="container__texto">Meu perfil</p>
                </a>
            </div>
        </header>
por Thiago Alves Ballalai de Carvalho
| 42k xp | 9 posts

Não consegui identificar o erro, por conta disso eu fui no repositório da aula e comecei a comparar o seu código com o código no github da aula, eu achei 3 diferenças entre os códigos. Não imagino que venha a ter sido a causa do bug, mas não custa nada tentar.

Diferença 1:

.container_titulo,
.container_titulo-negrito {
    font-family: var(--fonte-secundario);
    font-size: 30px;
    }

faltou o segundo "-" antes de negrito ficando:

.container_titulo,
.container_titulo--negrito {
    font-family: var(--fonte-secundario);
    font-size: 30px;
    }

Diferença 2

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

a propriedade não é background-color e sim background.

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

Diferença 3

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

Faltou a propriedade text-decoration

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

Desculpa não ter sido de grande ajuda.