如何在单击子元素时隐藏父元素答案

【问题标题】：How to hide a parent element on click of a child element如何在单击子元素时隐藏父元素
【发布时间】：2017-09-09 12:28:11
【问题描述】：

如何在 div 元素中单击锚标记时隐藏父 div 元素。

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

div {
  border: 1px solid red;
}

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

谢谢

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

您在 CSS 中寻找的东西并不完全可能，最好的办法是一些技巧 - 其中之一是使用 checkbox 和 label。

请看下面的演示：

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>

【讨论】：

这很有创意/创新！！
如果是label以外的元素呢？
感谢 kukkuz 的解决方案，虽然 hack 对我来说效果很好......我正在寻找解决这个问题 stackoverflow.com/questions/40647221/… 卡住了我在这里给出的如何使用 pure 隐藏和显示的问题css，但无法解决我链接的这个问题
@Srisa 乍一看，我认为它可以在this question as well 中工作，但它不会像那样a 标签将停止工作......

【解决方案2】：

这就是你想要的。但是，一旦鼠标按钮向上，这仍然会使其可见。

你能做的只有一件事，让它透明，但它仍然会在那里，没有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

【讨论】：

这看起来不错...但我不希望它在鼠标事件中启动
我已经编辑过了，但是没有 JS 就不可能得到这个

【解决方案3】：

你可以使用 :active,:focus 伪类。

这是一个简单的解决方案。你应该同时使用这两个类

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

我把sn-p放进去。

谢谢

【讨论】：

嗯，在子元素点击时为父元素设置样式似乎并不简单，你有没有 rad OP 想要什么？
你能添加一个sn-p它会帮助我...我无法得到一个解决方案
琼斯·维诺斯·约瑟夫：你在说什么