Селектор не работает, когда он установлен на фокус - PullRequest
Новая
       47

Селектор не работает, когда он установлен на фокус

1 голос
/ 17 октября 2019

Я пытаюсь создать кнопку меню, чтобы показать-скрыть меню на мобильных устройствах.

Если я установил селектор на: 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;
}

Ответы [ 2 ]

3 голосов
/ 17 октября 2019

Посмотрите на атрибут tabindex в div, чтобы заставить фокус работать.

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>
0 голосов
/ 17 октября 2019

Обратите внимание, что tabindex - отличный способ достичь того, что вы пытаетесь сделать. Тем не менее, есть некоторые вещи, которые вы могли бы изучить. Атрибут tabindex в основном используется для доступа с клавиатуры, хотя вы также можете использовать его с css "focus".

Проверьте значения, которые следует использовать для индексации на этой странице: https://web.dev/control-focus-with-tabindex

С уважением,

...