保持div在焦点/活动时可见的伪类？

Question

我有一个隐藏的 div，直到用户点击一个链接。使用a:active + div 选择器会显示 div。然后我有 div:active, div:focus 来保持 div 可见。

虽然让 div 看起来很简单，但保持它可见是我遇到的问题。如果我点击 div（将活动从链接中移除并将焦点/活动放在 div 上），那么 div 会再次消失。

我尝试过使用div:hover，当我将鼠标悬停在 div 上时，它会显示 div（即使在我点击它之后），它仍然会消失。为什么:active 和:focus 没有应用于我的div？

示例：http://jsfiddle.net/pJWPE/

Answer 1

您可以采用不同的方法，改用:target 伪类。说明这一点的最好方法是举一个例子：

#box {
  display: none;
}
#box:target {
  display: block;
}

<a href="#box">Open</a>  <a href="#">Close</a>

<div id="box">content</div>

警告，我不确定此示例的浏览器支持是什么样的。它适用于我的 Chrome 版本。

Answer 2

为什么 :active 和 :focus 没有应用于我的 div？

因为:active和:focus有一些限制：

6.6.1.2。用户操作伪类 :hover、:active 和 :focus

交互式用户代理有时会更改呈现以响应用户操作。 Selectors 提供了三个伪类，用于选择用户正在操作的元素。

• :active 伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上，:active 仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。
• :focus 伪类适用于元素具有焦点（接受键盘或鼠标事件，或其他形式的输入）。

对于哪些元素可以变为:active 或获取:focus，可能存在文档语言或实现特定的限制。

http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos

<div> 不是任何形式的输入（<textare>、<input>、...）或其他 interactive element（如 <a>、<audio>、<video>）。它只是一个容器。 :focus 和 :active 都不会被应用。

使用:target 代替suggested by Casey。

Answer 3

上下文是一个包含子菜单的菜单，我希望在单击相关菜单时显示它，并在单击链接时保持显示。 （和你很像）。

HTML 标记：

<nav>
    <ul>
        <li>
            <a href="#" > 
            </a>
            <div>
                <ul>
                   <li> 
                      <a href="/sites/p1.php">submenu link1</a></li>
                   <li> 
                      <a href="/sites/p2.php">submenu link2</a></li>
                   <li> 
                      <a href="/sites/p3.php">submenu link3</a></li>
                </ul>
            </div>
        </li>
    </ul> 
</nav>

对于 Firefox 和 Chrome 网络浏览器，我个人使用：

nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
   display : block;
}

第一个选择器引用我的链接锚点，以便在单击/选择选项卡时获取显示哪个子菜单。第二个是在您单击链接时保持子菜单 div 打开（它一直显示活动 div）。

这对我很有效，但不幸的是不适用于 IE。