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选择器的+元素 - 这将是非常棘手的

如何制作：悬停更多移动友好和可访问？

1 个答案: