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

【问题标题】：selector does not working when it is set to focus设置为焦点时选择器不起作用
【发布时间】：2019-10-17 07:55:13
【问题描述】：

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

如果我将选择器设置为 :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;
}

【问题讨论】：

如果你想聚焦一个div元素，你必须给这个div添加一个tabindex属性

标签： css css-selectors focus selector

【解决方案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>

【讨论】：

【解决方案2】：

请注意，tabindex 是实现您想做的事情的好方法。但是，您可能想探索一些事情。 tabindex 属性主要用于键盘访问，尽管您也可以将它与 css“焦点”一起使用。

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

亲切的问候，

【讨论】：