纯CSS隐藏/显示div，点击div时不要隐藏

Question

我用它来隐藏和显示DIV，但是当我按下链接时，它只是隐藏了div而不是去链接的位置。当我将鼠标悬停在链接上时会显示该位置，但是当我点击该链接时，它就不会在那里关闭该元素。

#cont {display: none; }
.show:focus + .hide {display: inline; }
.show:focus + .hide + #cont {display: block;}

http://jsfiddle.net/ekon6wfb/

Answer 1

这是因为从:focus元素中删除.show时隐藏了该元素。

要解决此问题，您还可以在将鼠标悬停在元素上时显示该元素：

Updated Example

.show:focus ~ #cont,
#cont:hover {
  display: block;
}

#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus ~ #cont,
#cont:hover {
  display: block;
}

<a href="#show" class="show">[Show]</a>
<a href="#hide" class="hide">/ [Hide]</a>
<div id="cont">
  <a href="/test">Go Here</a>
</div>