How to hide a parent element on click of a child e

问题:

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

回答1:

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>

回答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

回答3:

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