3

我有一个隐藏的 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/

4

3 回答 3

4

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

#box {
  display: none;
}
#box:target {
  display: block;
}
<a href="#box">Open</a>  <a href="#">Close</a>

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

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

于 2012-07-31T09:41:17.033 回答
2

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

因为:active并且:focus有一些限制：

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

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

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

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

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

A<div>不是任何形式的输入（<textare>, <input>, ...）或其他交互元素（如<a>, <audio>, <video>）。它只是一个容器。既不:focus也不会:active被应用。

:target按照Casey 的建议改用。

于 2012-07-31T09:44:58.743 回答
0

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

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 无效。

于 2015-02-03T08:47:31.080 回答