3
respostas

Não tem efeito o comando .blog a:hover + inicio-post, ...

Boa tarde,

Preciso de ajuda, não sei o que estou fazendo de errado, coloquei a classe inicio-post nos primeiros parágrafos dos artigos do blog e depois fiz coloquei os comandos .blog a:hover + inicio-post, .blog a:focus + inicio-post... e não aconteceu nada =(

insira seu código aqui
<article class="blog">

            <h2>Últimos artigos publicados</h2>


            <div class="artigo1 artigo">
                  <h3>O essencial de design responsivo</h3>
                  <time class="data" datetime="2018-02-15">15 de Fevereiro 
                    de 2018</time>
                  <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>              
                  <p><a class="leiaMais2" href="">Leia Mais</a></p>
            </div>


            <div class="artigo2 artigo">
                  <h3>Por que fazer páginas acessíveis?</h3>
                  <time class="data" datetime="2017-07-20">20 de Julho 
                    de 2017</time>
                  <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>
                  <p><a class="leiaMais2" href="">Leia Mais</a></p>
            </div>


            <div class="artigo3 artigo">
                 <h3>JavaScript não obstrusivo</h3>
                 <time class="data" datetime="2017-03-10">10 de Março 
                 de 2017</time>
                <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>
                 <p><a class="leiaMais2" href="">Leia Mais</a></p>
            </div>

             <p class="leiaMais"><a href="">Ver todos</a></p>

        </article>
insira seu código aqui
/** SEÇÃO BLOG**/
.blog {background-color: #171616;
       border: 0.1em solid white; width: 22em; height; 80em;
       color: white; position: relative; top: -46vh; left: 36vw;}

.blog .leiaMais {position: relative; top:1.5em; left: -7.5em;
                 text-align: center;}

.blog h2 {text-align: center;}

.blog h3 {font-size:0.9em; position: relative; left: 6vw; top: 2vh;}

.blog time {font-size: 0.7em; position: relative; left: 10em;}

.artigo {width:20em; height: 7em; border-bottom: 0.1em solid white;
                              position: relative; left:1em;}

.leiaMais2 {text-decoration: none; background-color: #f5ff00;
            display: inline-block; width: 6em; height: 2em;
            box-sizing: border-box; padding:0.6em;
            color: #1c1b1b; border: 0.05em solid white;
            font-size:1em; text-align: center;}

.leiaMais2 {position: relative; top:0.05em; left: 7em;}


.leiaMais2:hover {text-decoration: underline;}

/** Formatação para o primeiro paragrafo aparecer quando o usuário passar o mouse em cima do Veja Mais **/
.inicio-post {display: none;}

.blog a:hover + .inicio-post, .blog a:focus + .inicio-post {
          display:block;}
3 respostas

Oi Carolina tudo bem?

Poderia colocar por gentileza toda a pasta do seu projeto no github para eu poder analisar.

Claro, segue o link: https://github.com/Carolbrandes/PagJoaoDaSilvaAlura

Muito obrigada, pela atenção!

Oi Carolina, desculpe a demora.

Primeiramente gostei muito do visual novo que deu pra página.

Quanto o problema eu resolvi dessa forma

 <div class="artigo1 artigo">
                  <h3>O essencial de design responsivo</h3>
                  <time class="data" datetime="2018-02-15">15 de Fevereiro 
                    de 2018</time>
                    <a class="leiaMais2" href="">Leia Mais</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>             

Quando você escreveu o + quer dizer o elemento logo após. Então o inicio do post tem que estar abaixo do link leia mais para funcionar.

.blog a:hover + .inicio-post, .blog a:focus + .inicio-post {
          display:block;}

Espero ter ajudado!!!

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