html - 使用 :target selector 关闭带有纯 css 的容器

Question

我有以下 html:

我想在遇到 :target 时应用 display: none;。

如果我不使用 :hover 效果很好，您如何检查添加的 fiddle 的第二个示例，但是如果我添加的悬停不起作用并且我不明白为什么:|

#test1:target {
  display: none;
}
#container:hover #test1 {
  display: block
}
#test1 {
  display: none;
  height: 50px;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
}

<div id="container">
  HOVER ME
  <div id="test1">
    <a href="#test1">CLOSE ME</a>
    <p>
      CLOSE THIS CONTENT
    </p>
  </div>
</div>

Here is the fiddle:

Answer 1

您需要通过添加 #container 来隐藏它来增加选择器的特异性 -

#container:hover #test1:target {
    display: none;
}

body{padding:20px;}
#container{
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}
#container:hover #test1:target {
display: none;
}
#container:hover #test1, #container:hover #test2{display: block}
#test1{
  display: none;
  height: 50px;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
}


#container:hover #test2:target {
display: none;
}
#test2{
  display: none;
  height: 50px;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
}

<!--example one with hover not working-->
<div id="container"> HOVER ME
<div id="test1">
<a href="#test1">CLOSE ME</a> 
<p>CLOSE THIS CONTENT</p>
</div>
</div>
<hr>

<!--example two without hover it's working-->
<div id="container"> DISPLAYED 
<div id="test2">
<a href="#test2">CLOSE ME 2</a> 
<p>CLOSE THIS CONTENT 2</p>
</div>
</div>

Fiddle updated - http://jsfiddle.net/afelixj/adzFe/2839/