js: Replace :focus-within with JS-maintained .focus-within

Old browsers (like KaiOS 2.5) don't have :focus-within, but it's pretty
easy to replace the pseudo-class with a real .focus-within class
maintained by JavaScript event handlers.  This is made only marginally
fiddlier by the odd fact that "focus" and "blur" events don't bubble.
This commit is contained in:
Ben Harris
2022-11-14 22:16:03 +00:00
parent 52cd58043a
commit 8445f07827
2 changed files with 21 additions and 2 deletions

View File

@ -128,7 +128,7 @@ EOF
}
#gamemenu li > :hover:not(:disabled),
#gamemenu li > :focus-within {
#gamemenu li > .focus-within {
/* When the mouse is over a menu item, highlight it */
background: rgba(0,0,0,0.3);
}
@ -186,7 +186,7 @@ EOF
}
#gamemenu :hover > ul,
#gamemenu :focus-within > ul {
#gamemenu .focus-within > ul {
/* Last but by no means least, the all-important line that makes
* submenus be displayed! Any <ul> whose parent <li> is being
* hovered over gets display:flex overriding the display:none