如何使 :hover 对移动设备更友好且更易于访问？

Question

我正在使用 SCSS 制作 a dropdown menu。以下是其工作原理的摘录：

li {
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 15px 20px;
    background: $menuBG;
    color: $menuColor;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
        background: $hoverBG;
        color: $hoverColor;
    }

现在我真正想要的是让它做同样的事情，同时仍然允许它为那些没有鼠标的人（有辅助功能的客户端和手机的人）工作。使用 jQuery 并非不可能但不是首选。

Answer 1

首先，我不建议将下拉菜单用于任何旨在通过触摸使用的东西（所以无处可去，真的）。但是如果你想让它正常工作，你可以尝试：

• 使用JS在touchstart打开菜单，在touchstart关闭菜单外
• 同时使用 :hover 和 :focus，以便在单击时打开菜单（仅限 CSS）
• 或者对于更可靠但更棘手的仅 CSS 解决方案，您可以尝试 anchor 元素与 ::after 伪元素以及 :active 和 + 选择器——这将非常棘手