CODEWITHSUNDEEP
csscss-selectorsfocusselector
Botond Vajna
Botond Vajna

Reputation: 1541

selector does not working when it is set to focus

I am trying to create a menu button, to show-hide the menu on mobile devices.

If I set the selector to :hover, or :active, it is ok, but when I set the selector to :focus, nothing happens.

<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;
}

Upvotes: 1

Views: 86

Answers (2)

Carlos Pimentel
Carlos Pimentel

Reputation: 489

Notice that the tabindex is a great way to achieve what you're tyring to do. However, there are some things you might want to explore. The tabindex attribute is mostly used for keyboard access, though you might use it with the css "focus" as well.

Please check the values you should use to the index at this page: https://web.dev/control-focus-with-tabindex

Kind regards,

Upvotes: 0

d-h-e
d-h-e

Reputation: 2558

Look at the tabindex attribute on the div to get the focus working.

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>

Upvotes: 3

Related Questions