1
resposta

Houver

Boa tarde! adicionei a 'houver' porem não funcionou, poderiam verificar o que fiz de errado?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Renovação Gráfica</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/8e3f83b35f.js" crossorigin="anonymous"></script>
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__paragrafo">Olá! Somos a Renovação Gráfica, melhores preços e condições de pagamentos facilitados.</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo"><b>Acesse minha rede:</b></h2>
                <a class="apresentacao__links__link" href="https://Instagram.com/renovacaografica">
                    <ul id="apresentacao__links__contact">
                        <li><i class="fa-brands fa-square-instagram"></i>
                    </ul>
                    Instagram
                </a>
                <h2 class="apresentacao__links__subtitulo"><b>Veja minha localização:</b></h2>
                <a class="apresentacao__links__link" href="https://www.google.com/maps/place/2%C2%B033'10.4%22S+44%C2%B012'47.4%22W/@-2.5528922,-44.2157335,17z/data=!3m1!4b1!4m4!3m3!8m2!3d-2.5528922!4d-44.2131586?hl=pt-BR&entry=ttu">
                    <ul id="apresentacao__links__contact">
                        <li><i class="fa-solid fa-location-dot"></i></li>
                    </ul>
                    Localização
                </a>
            </div>
        </section>
        <img src="./assets/logo.png" alt="Logo da empresa renovação gráfica" width="400" height="400">
    </main>
    <footer></footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital@0;1&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: white;
    color: black;    
}

.titulo-destaque {
    color: purple;
}

.apresentacao {
    margin: 10% 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.apresentacao__conteudo__paragrafo {
    font-size: 24px;
        font-family: "Montserrat", sans-serif;
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
}

.apresentacao__links__subtitulo {
    font-family: 'krona one', 'sans-serif';
    font-weight: 400;
    font-size: 24px;
    padding: 16px;
}

.apresentacao__links__link {
    background-color: #C4EBA7;
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid black;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: black;
    font-family: "Montserrat", sans-serif;
    #apresentacao__links__contact {
        list-style-type: none;
    }
}

.apresentacao__links__link:houver {
    background-color: #272727;
}
1 resposta

Oi Paulo, tudo bem?

Parece que você está tentando adicionar um efeito de hover ao seu link, mas houve um pequeno erro de digitação na sua folha de estilo CSS. Você escreveu "houver" em vez de "hover".

O pseudoclasse correta em CSS para mudar o estilo de um elemento quando o mouse está sobre ele é ":hover". Portanto, você deve alterar a última linha do seu CSS para:

.apresentacao__links__link:hover {
    background-color: #272727;
}

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software