如何使 :hover 对移动设备更加友好和可访问

Question

我正在使用SCSS制作下拉菜单。以下是其工作原理的摘录：

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解决方案，您可以尝试使用::after伪元素以及:active和+选择器的anchor元素 - 这将是非常棘手的