Seletores :active | Front-end

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Marcelo Piola Peres

| 44.9k xp | 25 posts

Bom dia, ontem realizei a mesma pergunta e o instrutor me explicou perfeitamente, porém após eu tentar aplicar, tive problemas, não compreendo porque não está dando certo, já realizei as orientações do instrutor, alterei id e class e fiz diversos testes e nada, alguém poderia dar um help?

Preciso que o resultado final fique desta forma abaixo, utilizando CSS e HTML apenas

https://i.ibb.co/gZKc6sh/exemplo.gif

Quando clica no (?) aparece a mensagem de texto e se fecha quando clica novamente.

Para isso criei utilizando seletores, da seguinte forma

HTML

<header>
            <img id="banner" src="./assets/imgs/logoc_index.svg">
            <p>Mensagem qualquer 
                <img class="about" src="./assets/imgs/about.svg">
                <div id="show">Esta é uma mensagem com informações</div>
            </p>
</header>

CSS

.about {
    width: 13px;
    display: inline;
}

#show {
    display: none;
    width: 30%;
    border: 1px solid #BFBFBF;
    background-color: #EEEEEE;
    color: #282923;
}

#show:active+.about{
    display: block;
}

Note que tentei todas as combinações possíveis de id e class entre o "show" e "about" ficando neste exemplo acima a solução dada pelo instrutor, porém não consegui fazer funcionar.

Alguém poderia dar uma luz?? Já não sei mais o que fazer

3 respostas

solução!

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

12/12/2019

Fala ai Marcelo, tudo bem? Vamos lá:

O primeiro problema do seu código está no HTML, não podemos ter div dentro de p, sugiro inverter os dois:

<header>
  <img id="banner" src="./assets/imgs/logoc_index.svg">
  <div>
    Mensagem qualquer 
    <img class="about" src="./assets/imgs/about.svg">
    <p id="show">Esta é uma mensagem com informações</p>
  </div>
</header>

Depois, seu CSS deveria escutar pelo hover da div para mostrar o show, ou seja, quando o mouse estiver em cima do texto ele vai mostrar o conteúdo do p:

.about {
    width: 13px;
    display: inline;
}

#show {
    display: none;
    width: 30%;
    border: 1px solid #BFBFBF;
    background-color: #EEEEEE;
    color: #282923;
}

div:hover > #show {
    display: block;
}

Caso a solução não seja essa, vamos nos falando.

Espero ter ajudado.

por Marcelo Piola Peres

| 44.9k xp | 25 posts

13/12/2019

Bom dia Matheus, tudo bem e por ai?

Agradeço muito a ajuda, sou iniciante e quebrei muito a cabeça sem conseguir encontrar uma saída, você esclareceu muito minhas dúvidas, deu super certo.

Só restou uma pequena questão, eu optei por utilizar o :active pois minha intenção é deixar a div visível para o usuário ler a mensagem e depois, ao finalizar a leitura, pressionasse novamente para fechar a div, por isso não utilizei o :hover, ainda mais por se tratar de layout apenas mobile.

Com o :active deu certo porém só é visível enquanto está pressionado sobre o elemento ao retirar o cursor "clicado" ele para de exibir a div (desativando automaticamente).

Estou buscando nos cursos aqui da plataforma Alura e Google, mas não encontro nada sobre.

Saberia me orientar quanto a isto? Muito obrigado novamente.

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

16/12/2019

Fala Marcelo, vamos lá:

Com o :active deu certo porém só é visível enquanto está pressionado sobre o elemento ao retirar o cursor "clicado" ele para de exibir a div (desativando automaticamente).

Esse seria um problema? Pois o compartamento do :active é exatamente esse, enquanto o link está clicado ele vai mostrar a div.

Espero ter ajudado.