Question

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

我知道如何在javascript / jQuery中执行此操作。我正在寻找纯CSS解决方案

＆＃13;

div {
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

由于

Answer 1

这就是你想要的。但是，一旦鼠标按钮启动，这仍然可以看到它。

你只能做一件事，让它变得透明，但它仍然存在，如果没有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

Answer 2

你在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>

Answer 3

你可以使用：active，：focus伪类。

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

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

我把片段放进去了。

谢谢

如何在点击子元素时隐藏父元素

3 个答案: