选择器设置为焦点时不起作用

Question

我正在尝试创建菜单按钮，以在移动设备上隐藏菜单。

如果我将选择器设置为：hover或：active，就可以了，但是当我将选择器设置为：focus时，什么也没有发生。

<div class = "menu-show-hide"></div>

<div class = "header-menu">
    <div class="menu-header-left-container">
        <ul>
            <li>...</li>
            <li>...</li>

        </ul>
    </div>
    <div class="menu-header-right-container">
        <ul>
            <li>...</li>
            <li>...</li>

        </ul>
    </div>
</div><!-- .header-menu   -->

css：

.menu-show-hide {
    position: relative;
    width: 64px;
    height: 64px;
    background: url(menu-button.png) center no-repeat;
    z-index: 9999;
}
.header-menu {
    position: relative;
    display: none;
}
/* working */
.menu-show-hide:active ~ .header-menu {
    display: block;
}
/* not working */
.menu-show-hide:focus ~ .header-menu {
    display: block;
}

Answer 1

查看div上的tabindex属性以使焦点工作。

https://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

div {
  margin: 10px;
}

div:focus {
  border: 2px solid red;
  outline: none;
}

<div>click here - div without tabindex</div>

<div tabindex="1">click here - div with tabindex</div>

Answer 2

注意，tabindex是实现您要完成的操作的好方法。但是，您可能需要探索一些东西。 tabindex属性主要用于键盘访问，尽管您也可以将其与c​​ss“ focus”一起使用。

请在此页面上检查用于索引的值：https://web.dev/control-focus-with-tabindex

亲切的问候，