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;
}