Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Ajuda! Não consigo fazer o efeito hover nos links da seção blog

Não consigo fazer com que o início do post apareça ao se passar o mouse pelo link no exercício https://cursos.alura.com.br/course/avancando-html-css/task/6184"

Segue meu código HTML:

<section class="secao-inicio blog">
            <h2>Blog</h2>
            <small>Últimos posts</small>
            <ol>
                <li>
                    <a href="blog.html">O essencial de design responsivo</a>
                    <p class="inicio-post">Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>
                </li>
                <li>
                    <a href="blog.html">Por que fazer páginas acessíveis?</a>
                    <p class="inicio-post">Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>
                </li>
                <li>
                    <a href="blog.html">JavaScript não obstrusivo</a>
                    <p class="inicio-post">JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>
                </li>
            </ol>
            <a class="botao-index" href="blog.html">Veja mais</a>
        </section>

E o código CSS:

.blog {
    color: #FFF;
    border-bottom: .5em solid #851944;
    position: relative;
    background-image: linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, 0.1) 14px, rgba(255, 255, 255, 0.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment:fixed;
    background-color: #999;
}
.blog small {
    position: relative;
    top: -2em;
}
.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
}
.inicio-post {
    position: absolute;
    top: 4em;
    height: 8em;
    left: 30%;
    right: 4em;
    background-color: #F2FFFC;
    color: #000;
    padding: 1.5em;
    display: none;
}
blog li a:hover + .inicio-post {
    background-color: #F2FFFC;
    margin-right: 4em;
    color: #F26;
    display: block;
}
2 respostas
solução!

Opa Mônica, blz?

Você esqueceu de por o ponto(.) na class do blog ali do hover :

.blog li a:hover + .inicio-post {
    background-color: #F2FFFC;
    margin-right: 4em;
    color: #F26;
    display: block;
}

Mas também você pode utilizar assim:

a:hover +.inicio-post {
    background-color: #F2FFFC;
    margin-right: 4em;
    color: #F26;
    display: block;
}

Já que você não esta utilizando a class blog poderia retirar. Também pode deixar mais generico tirando o LI, ou deixando mais específico, que o hover só funcione dentro de um li que tenha a class inicio-post:

li a:hover +.inicio-post {
    background-color: #F2FFFC;
    margin-right: 4em;
    color: #F26;
    display: block;
}

Olhei diversas vezes e não vi que faltava um ponto. Obrigada!

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