HTML、:hover css 菜单和辅助功能
我有一个问题。
我制作了一个 CSS 菜单（不需要 JavaScript）。这依赖于a:hover来显示或隐藏A中的UL元素。
使用visibility:hidden;能见度：可见；
到目前为止一切顺利，直到我尝试只使用键盘。
现在为了便于访问，我需要能够仅使用键盘进行导航。
所以我还将 a:focus 添加到控制可见性的类中。
然而，这并没有修复菜单，它仍然关闭。
有谁知道如何做到这一点以保持我的网站可访问？
提前致谢。
编辑 JSFiddle
最大的问题是如何实现这一点，以便他们可以点击下面的链接。 我只能用鼠标来做，不能只用键盘做。
一定有人知道该怎么做？！
I have a question.
I have made a css menu (no javascript required). This relies on a:hover to show or hide UL elements within the A.
using visibility:hidden; and visibility:visible;
So far so good, until I try and use only a keyboard.
Now to be accessible I need to be able to navigate solely with the keyboard.
So I also added the a:focus to the classes that control the visibilty.
This however did not fix the menu and it remains closed.
Does anyone know how to accomplish this to keep my site accessible?
Thanks in advance.
edit JSFiddle
The biggest problem is how to achieve this so they can tab on the links below.
I can do it for mouse only, not for keyboard only.
Someone must know how to do this?!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
纯基于 css 的：悬停菜单即使使用鼠标，通常也不是非常用户友好。由于指针一旦超出菜单一个像素，它就不再悬停并消失。这可能非常烦人，尤其是对于精细运动控制能力较差的人来说。
我建议你使用javascript来显示和隐藏子菜单，添加一个延迟，这样如果你碰巧移出菜单一会儿，菜单就不会消失得太快（或者使用单击激活并单击隐藏菜单可能会更好）。确保对于不使用 JavaScript 的用户，菜单不会隐藏（默认情况下子菜单可见，并使用 javascript onLoad 隐藏它们）。
编辑 1： 当然，您还可以编写 Java 脚本来响应单击/悬停和焦点。
编辑2：
如果您首先设计页面，使其在没有 javascript 或 css 选择器（例如：hover）的情况下工作，则菜单和子菜单始终可见。然后添加 javascript，在文档加载时隐藏子菜单，并在单击/焦点等时切换子菜单。它将自动为不使用 javascript 的用户工作。
如果设计不能很好地处理所有可见的子菜单（例如，它们重叠或类似的情况），您还可以制作一个静态版本（没有 javascript 的可见子菜单），设计为即使在完全可见时也能正常工作，并将其替换为当 JavaScript 加载时，一个更复杂的 JavaScript 控制菜单。或者，您可以让顶级菜单项（在动态版本中始终可见的菜单项）链接将查询参数发送到服务器，从而在服务器端打开和关闭特定菜单项，并且 javascript 删除
href来自链接的值并添加侦听器以打开和关闭子菜单，而无需服务器往返。这取决于菜单有多大才是最合理的。Pure css based :hover menues are not typically very user friendly even using a mouse. Since the as soon as the pointer is one pixel outside the menu, it's no longer hovered and disappears. This can be very annoying, especially for people with poor fine motor control.
I would suggest you use javascript to show and hide the sub menues, adding a delay so the menu does not disappear too fast if you just happen to move outside the menu for a moment (or use click activated and click hidden menu may be even better). Make sure that the menu is not hidden for users not using JavaScript (make submenus visible by default and hide them using javascript onLoad).
Edit 1: And of course you write the java script to respond both to click/hover and focus.
Edit 2:
If you design the page first to work without javascript or css selectors such as :hover, e.g. the menu and the sub-menus are visible all the time. Then add javascript that hides the submenu on document load, and toggles the sub-menus on click / on focus etc. It will automatically work for users not using javascript.
If the design does not work well with all the submenus visible (e.g. they are overlapping or something like this), you could also make a static version (the one visible without javascript) designed to work well even when fully visible, and replace it with a more complex javascript controlled menu when the javascript loads. Or you could let the top level menu items (those always visible in the dynamic version) links that send a query parameter to the server that toggle the specific menu item on and off serverside, and the javascript removes the
hrefvalue from the links and adds listeners to open and close the submenus without the server roundtrip. It depends on how large the menus are what would be most sensible.关于为什么会发生这种情况，最简单的答案是您已将子菜单设计为在
a聚焦时显示。如果您从a元素中按 Tab 键，a将不再聚焦，因此子菜单会再次消失（根据选择器/声明）。至于解决办法，我得考虑一下；抱歉不能立即发挥作用。
编辑以回应OP的问题（在评论中）：
不幸的是，恐怕我想不出非 JavaScript 的方法来实现可访问性。目前，CSS 不允许选择父母或兄弟姐妹（如果
.subnav a:focusparent(li)siblings是有效的选择器，则可以使其工作）。The simplest answer as to why this happens is that you've styled the sub-menu to appear when the
ais focused. If you tab from theaelement theais no longer focused, and therefore the sub-menu disappears again (as per the selector/declarations).As for a fix, I'll have to think about that; sorry not to be more immediately useful.
Edited in response to question from OP (in comments):
Unfortunately, I can't think of a non-JavaScript means to achieve accessibility, I'm afraid. At this time CSS doesn't allow for the selection of parents or siblings (which could make it work, if
.subnav a:focus parent(li) siblingswas a valid selector).我确信，我可能是错的，这与特殊性有关。通常，动态伪类的样式顺序会影响规则的优先级。
以上只是可能的顺序之一，具体取决于您想要达到的效果，并且它们具有不同的特异性。我怀疑您的订单受到干扰，并且由于特殊性，您的样式没有被应用。 HTML 和 CSS 相同将有助于挖掘问题。
Sitepoint
I am sure, and I might be wrong, that it has to do with the specificity. Usually the order in which the dynamic pseudo classes are styled, effects the rule precendence.
The above is just one of the possible order depending upon the effect you want to acheive and they have different specificity. I suspect your order is interfering and because of specificity, your styles are not being applied. HTML and CSS for the same will be helpful to dig out the problem.
Sitepoint
这是一个纯 CSS 解决方案。
已在 Chrome 11、Firefox 2、Opera 9.5、Safari 4、IE8 和 IE9 上进行测试并工作。
我沮丧地发现使用
:active（而不是IE7 不支持:focus) 与同级选择器（相邻或常规）。Here's a pure CSS solution.
Tested and working on Chrome 11, Firefox 2, Opera 9.5, Safari 4, IE8 and IE9.
I discovered to my dismay that using
:active(instead of:focus) with the sibling selectors (adjacent or general) isn't supported by IE7.