2

How can I make parent div element hidden, on click of anchor tag within the div element.

I know how can we do this in javascript/jQuery. I am looking for pure CSS solution

div {
  border: 1px solid red;
}
<div>
  <span>
    <a>helo</a>
  </span>
  <span>
    <a>hi</a>
  </span>
</div>

Thanks

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Srisa
  • 269
  • 1
  • 3
  • 9

3 Answers3

2

Is that what you want. But still this would make it visible once mouse button is UP.

There is only one thing you can do, Make it transparent, But it still will be there, And you cannot achieve this perfectly without JS:

div {
  border: 1px solid red;
  height: 50px
}
div {
  pointer-events: none;
  opacity:1;
  animation: hide 0.1s linear infinite;
  animation-play-state: paused;
}
div a {
  pointer-events: auto;
}
div:active {
  animation-play-state: running;
}
@keyframes hide {
1%{
  opacity:0;
  position:absolute;
  }
  100% {
    opacity: 0;
    position:absolute;
  }
}
<div>
  <span>
    <a>helo</a>
  </span>
  <span>
    <a>hi</a>
  </span>
</div>
Some randow text/element
Jones Joseph
  • 4,703
  • 3
  • 22
  • 40
2

What you look for is not exactly possible in CSS, and your best bet is some hacks - one of them is using a checkbox and label.

See demo below:

div {
  border: 1px solid red;
}
#checkbox,
#checkbox:checked + div {
  display: none;
}
a {
  border: 1px solid;
  margin:5px;
}
<input type="checkbox" id="checkbox" />
<div>
  <span>
    <a><label for="checkbox">hello</label></a>
  </span>
  <span>
    <a><label for="checkbox">hi</label></a>
  </span>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • 1
    Thats very creative/innovative!! – Jones Joseph Nov 18 '16 at 06:36
  • What if its an element other than `label` ? – Jones Joseph Nov 18 '16 at 06:40
  • 1
    Thanks kukkuz for the solution ,though a hack worked out well for me ...i was looking to solve this problem http://stackoverflow.com/questions/40647221/how-to-make-a-toggleable-navbar-in-pure-css/40648227?noredirect=1#comment68549678_40648227,then stuck with the problem i gave here of how to hide and show using pure css but could not achieve this problem i linked – Srisa Nov 18 '16 at 06:53
  • @Srisa At first look I jumped into that it would work in [this question as well](http://stackoverflow.com/questions/40647221/how-to-make-a-toggleable-navbar-in-pure-css), but it will not as then the `a` tags will stop working... – kukkuz Nov 18 '16 at 07:37
0

you can use :active,:focus pseudo class.

it's simple solution.you should use both class

span:active div.parent{background:#eaeaea}
span:focus div.parent{background:#eaeaea}

i put the snippet in.

thank you

web.Doctor
  • 1
  • 1