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

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 属性主要用于键盘访问，尽管您也可以将它与 css "focus" 一起使用。

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

亲切的问候，

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

selector does not working when it is set to focus

css

focus

css-selectors

selector