如何在单击子元素时隐藏父元素 [英] How to hide a parent element on click of a child element

问题描述

我知道我们如何在javascript / jQuery中做到这一点。我正在寻找纯CSS解决方案

  div {border：1px solid red; }  

 < div& < span> < a> helo< / a> < / span> < span> < a> hi< / a> < / span>< / div>  

p>

解决方案

你在CSS中找不到什么是可能的，你最好的打赌是一些黑客 - 其中之一是使用复选框和标签。

  div {border：1px solid red;}＃checkbox，＃checkbox：checked + div {display：none;} a {border：1px solid; margin：5px;}  

 < input type = id =checkbox/>< div> < span> < a>< label for =checkbox> hello< / label>< / a> < / span> < span> < a>< label for =checkbox> hi< / label>< / a> < / span>< / div>  

How can I make parent div element hidden ,on click of anchor tag within 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

解决方案

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>

这篇关于如何在单击子元素时隐藏父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！