Question

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

虽然使div显得简单，但保持可见是我的问题。如果我点击div（取消激活链接并将焦点/活动放在div上），则div会再次消失。

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

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

为什么：有效且：焦点没有应用于我的div？

由于:active和:focus有一些限制：

6.6.1.2。用户操作伪类：hover，：active和：focus

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


:active伪类适用于用户激活元素的情况。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上，：active仅适用于主要或主要激活按钮（通常是＆＃34;左侧＆＃34;鼠标按钮）及其任何别名。

: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代替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＆amp; Chrome网络浏览器，我个人使用：

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

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

这对我很有用，但不适合IE不幸。

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

3 个答案: