Question

我有一个问题。

我已经制作了一个css菜单（不需要javascript）。这依赖于：hover来显示或隐藏A中的UL元素。

使用visibility：hidden;和可见性：可见;

到目前为止一直很好，直到我尝试只使用键盘。

现在可以访问我需要能够仅使用键盘进行导航。

所以我还将a：焦点添加到控制可见性的类中。

然而，这并没有修复菜单，它仍然关闭。

是否有人知道如何实现此目标以保持我的网站可访问？

提前致谢。

修改 JSFiddle

最大的问题是如何实现这一目标，以便他们可以在下面的链接上进行选项卡。我只能用于鼠标，而不能只用于键盘。

有人必须知道如何做到这一点吗？！

Answer 1

纯粹基于CSS：即使使用鼠标，悬停菜单通常也不是非常友好。由于只要指针是菜单外的一个像素，它就不再悬停并消失。这可能非常烦人，特别是对于精细运动控制不佳的人。

我建议您使用javascript来显示和隐藏子菜单，添加一个延迟，这样如果您恰好在菜单外移动片刻（或使用点击激活并点击隐藏菜单，菜单不会消失太快）更好）。确保不使用JavaScript的用户不隐藏菜单（默认情况下使子菜单可见，并使用javascript onLoad隐藏它们。）

编辑1：当然，你编写java脚本来响应click / hover和focus。

编辑2： 如果您首先设计页面而不使用javascript或css选择器，例如：hover，例如菜单和子菜单始终可见。然后添加在文档加载时隐藏子菜单的javascript，并在点击/焦点等上切换子菜单。它将自动适用于不使用javascript的用户。

如果设计不能很好地显示所有可见的子菜单（例如它们是重叠的或类似的东西），你也可以创建一个静态版本（没有javascript可见的版本），即使在完全可见的情况下也能很好地工作，并且当javascript加载时，用更复杂的javascript控制菜单替换它。或者您可以让顶级菜单项（在动态版本中始终可见）链接将查询参数发送到服务器，该服务器在服务器端打开和关闭特定菜单项，并且javascript从中移除href值链接并添加侦听器以打开和关闭子菜单，而无需服务器往返。这取决于菜单的大小最合理。

Answer 2

关于为什么这种情况发生的最简单的答案是，当a聚焦时，您已经设置了子菜单的样式。如果您从选项 a元素a 不再关注，那么子菜单会再次消失（根据选择器/声明）。

至于解决方案，我将不得不考虑这个问题;抱歉不要立即有用。

已编辑以回应OP提出的问题（在评论中）：

......问题是，你如何做到这一点让它可以访问？

不幸的是，我不敢想到非JavaScript手段来实现可访问性，我担心。此时CSS不允许选择父母或兄弟姐妹（如果.subnav a:focus parent(li) siblings是有效的选择器，则可以使其工作。）

Answer 3

我确信，我可能错了，它与特异性有关。通常，动态伪类的样式顺序会影响规则优先级。

a:link /*for unvisited links, mutually exclusive to :visit*/
a:visted /*for visited links, mutually exclusive to :link*/
a:focus /*for focused elements such as selection by accesskey using keyboard*/
a:hover /*for elements in the state of being hovered upon by mouse*/
a:active /*for elements that are in the state of being activiated*/

以上只是可能的顺序之一，取决于你想要实现的效果，它们具有不同的特异性。我怀疑你的订单是干扰的，并且由于特殊性，你的风格没有得到应用。相同的HTML和CSS将有助于挖掘问题。

Sitepoint

Answer 4

这是pure CSS solution 在Chrome 11，Firefox 2，Opera 9.5，Safari 4，IE8和IE9上经过测试和工作。
我发现令人沮丧的是，IE7不支持使用:active（而非:focus）与兄弟选择器（相邻或一般）。

HTML，：hover css菜单和辅助功能

4 个答案: