使用 :target 选择器关闭带有纯 css 的容器答案

【问题标题】：Close container with pure css using :target selector使用 :target 选择器关闭带有纯 css 的容器
【发布时间】：2016-12-05 08:59:55
【问题描述】：

我有以下html：

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

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

#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:

【问题讨论】：

标签： html css hover target

【解决方案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/

【讨论】：

太棒了！！！只有一件事，为什么关闭容器后悬停不起作用？ :|我的意思是第二次尝试通过将鼠标悬停在容器上打开容器时不会显示：| jsfiddle.net/adzFe/2840

【解决方案2】：

实际上不可能使用 :target 选择器在悬停时再次提示该容器。我建议您改用 :active 。像魅力一样工作。

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.container:hover .test1:active {
    display: none;
}
.container:hover .test1 {
    display: block
}
.test1 {
    display: none;
    height: 50px;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.bubu {
    pointer-events: auto;
}

<div class="container">
	Drop down menu
	<div class="test1">
		<a class="bubu" href="#">CLOSE ME</a>
		<p class="content">
			CLOSE THIS CONTENT
		</p>
	</div>
</div>

【讨论】：