How to click on a link and make an element invisible using CSS only?

Asked

Viewed 336 times

0

I need you to click this link <a class="close" href="#">&times;</a> mine figure remain invisible. Using only 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>
css
  • 1

    Using only CSS, I don’t think you’ll be able to do that.

  • 1

    Gladison, in the other question I’ve already advised you on: if you need to work with DOM events, you’ll need to do it with Javascript. CSS is just for styling the elements. And, honestly, you just have to analyze the solution of your other question that you will be able to solve this. For this you will need to study the code. Apparently you have not done it as I recommended.

  • Gladison, do not disregard the comments made by colleagues. CSS is only for applying styles, but if you really want to insist on it from a look at that link. https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css

  • 2

    Possible duplicate of How to hide and display a form using a link

  • @Andersoncarloswoss Amigo, I used the code you recommended and managed to do it. Rsss I made some adjustments. perfect

1 answer

0

Would the form below meet your need?

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>

I have made the following changes: I have withdrawn the tag a from within the tag figure; 2nd I added a class called 'link' for the link to be clicked; 3º I added the CSS to hide the figure by clicking on the element of class so-called 'link'.

  • The example didn’t work! The positive answer was wrong. Sorry!

  • @Gladison Did you leave the code as I said above? To work it is necessary to remove the link from within the tag figure it will work as the example above is working.

  • But I can’t remove the link from there as everything is organized and outside will not work properly due to settings

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.