-1

Preciso que ao clicar neste link <a class="close" href="#">&times;</a> minha figure fique invisível. Utilizando apenas CSS.

CSS

figure.pop-up-principal {
    position: fixed;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
figure.pop-up-principal img{
    position: absolute;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;
}
.close{
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: black;
  border:2px solid #EF9A9A;
  background-color: red;
  text-align: center;
  position: relative;
  z-index: 100;
  margin-right: 5px;
  margin-top: 6px;
  text-decoration: none;
}

HTML

<figure class="pop-up-principal">
    <a class="close" href="#">&times;</a>
    <a href="http://www.bmimplantes.com.br" target="_blank">
    <img src="./imagens-pop-up/drbrunomachado.jpg">
    </a>
</figure>
5
  • 2
    Utilizando apenas CSS, creio você não vai conseguir fazer isso. Commented 24/07/2017 às 14:14
  • 1
    Gladison, na outra pergunta eu já te orientei sobre isso: se você precisa trabalhar com os eventos do DOM, precisará fazer com JavaScript. CSS é apenas para estilização dos elementos. E, sinceramente, basta você analisar a solução da sua outra pergunta que você conseguirá resolver isso. Para isso você precisará estudar o código. Aparentemente ainda não o fez como recomendei.
    – Woss
    Commented 24/07/2017 às 14:16
  • Gladison, não desconsidere os comentários feito pelos colegas. CSS é apenas para aplicar estilos, mas se você quiser mesmo insistir com isso de uma olhada nesse link. stackoverflow.com/questions/13630229/…
    – Bsalvo
    Commented 24/07/2017 às 14:18
  • 2
    Possível duplicata de Como ocultar e exibir um formulário utilizando um link
    – Woss
    Commented 24/07/2017 às 14:20
  • @AndersonCarlosWoss Amigo, recorri ao código que me recomendou e consegui fazer. Rsss Fiz alguns ajustes. perfeito
    – Gladison
    Commented 24/07/2017 às 14:37

1 Resposta 1

-1

Será que da forma abaixo atenderia à sua necessidade?

figure.pop-up-principal {
    position: fixed;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}
figure.pop-up-principal img{
    position: absolute;
    width: 100%;
    max-width: 430px;
    max-height: 283px;
    height: auto;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: white;
    border-radius: 10px;
    border: 5px solid #9AD3DE;
    box-sizing: border-box;
    z-index: 0;
    overflow: hidden;
}
.close{
  float: right;
  width: 25px;
  height: 25px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  color: black;
  border:2px solid #EF9A9A;
  background-color: red;
  text-align: center;
  position: relative;
  z-index: 100;
  margin-right: 5px;
  margin-top: 6px;
  text-decoration: none;
}

body {
  display: block;
}
.link:focus ~ .pop-up-principal {
  display: none;
}
<a class="link" href="http://www.bmimplantes.com.br" target="_blank">Link</a>

<figure class="pop-up-principal">
    <a class="close" href="#">&times;</a>
    
    <img src="./imagens-pop-up/drbrunomachado.jpg">
    </a>
</figure>

Fiz as seguintes alterações: 1º retirei a tag a de dentro da tag figure; 2º adicionei uma class denominada 'link' para o link a ser clicado; 3º Adicionei o CSS para ocultar a figure ao clicar no elemento de class denominada 'link'.

3
  • O exemplo não funcionou! Foi engano a resposta positiva. Desculpe!
    – Gladison
    Commented 24/07/2017 às 14:36
  • @Gladison Você deixou o código conforme falei acima? Para funcionar é necessário retirar o link de dentro da tag figure ai vai funcionar conforme o exemplo acima está funcionando.
    – Leandro
    Commented 24/07/2017 às 14:39
  • Mas eu não posso retirar o link de lá, pois tudo está organizado e fora não funcionará corretamente devido as configurações
    – Gladison
    Commented 24/07/2017 às 14:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .