Focus-within: как при табе на скрытый блок, включать его стили как при hover?

Question

[MyQuestion]

Добрый день!

При наведение мышкой, на кнопку и на меню, кнопка остаётся подсвеченной:

.site-list__item:hover > .site-list__link,
.site-list__item:focus > .site-list__link {
  color: #323232;

  background-color: #f8f7f4;
}

Использовал focus-within:

.hover-dropdown:focus-within .dropdown {
  display: block;
}

Теперь я могу переходить на скрытый блок табом. Но стили подсветки кнопки, перестали работать...

Как это решить с помощью css?
Нормально ли реализовать чуть более сложную логику всяких hover эффектов с помощью JS? Вроде перебор, но иногда так хочется...

Структура выпадающего блока:

<li class="site-list__item hover-dropdown">
              <a class="site-list__link" href="#"><span class="link-underline">Каталог</span></a>
              <ul class="site-list__sub-menu sub-menu dropdown">
                <li class="sub-menu__item sub-menu__item--title">
                  <a class="sub-menu__link sub-menu__link--title">Новинки</a>
                </li>
                <li class="sub-menu__item">
                  <a class="sub-menu__link" href="HTML/cotalog.html">Текст</a>
                </li>
                <li class="sub-menu__item">
                  <a class="sub-menu__link " href="#">Текст</a>
                </li>
                <li class="sub-menu__item">
                  <a class="sub-menu__link" href="#">Текст</a>
                </li>
                <li class="sub-menu__item">
                  <a class="sub-menu__link" href="#">Текст/a>
                </li>
              </ul>
            </li>

Comments

[Ankhena]

1. Сделайте песочницу с кодом jsfiddle.net
2. Опишите полностью задачу и прикрепите кусок макета/стайлгайда.
3.

.site-list__item:focus

У li по умолчанию нет состояния фокуса, он есть только на интерактивных элементах.
Вам нужен :focus-within
4.

<span class="link-underline">Каталог</span>

В одном из ваших прошлых вопросов я уже объясняла, что этот span лишний.

[MyQuestion]

Ankhena,
Спасибо. Извините за беспокойство, я отказался от этой идеи.
Выпадающие блоки, почему-то не получают состояние фокус. Видимо по той причине, что Вы описали. Похоже, попадая во внутренний блок с помощью tab, фокус получает элемент этого блока (ссылка, инпут). А эффект, который я пытаюсь получить, у элемента параллельного дерева.

Получается, селекторы "~", ">", "+" и стандартная вложенность, просто не способны достучаться из потомка родителя, до параллельного родителя, который к тому-же ещё и находится выше в потоке их общего родителя.

Если наглядно:

<div class="all">
  <div class="block1"></div>
  <div class="block2">
    <div class="block2__1">
      <a href="" class="block2__link"></a>
    </div>
  </div>
</div>

Я, получая фокус(tab) на block2__link, пытаюсь применить стиль к block1. Ну тут как бы, никак... ) Без js.

Про спан я помню )
Вы правы, наверное это не самое лучше решение.
Есть вариант накинуть padding на лишку, и дать ей подсветку при ховере. Тогда я спокойно смогу дать линию на "a". Но лучше так не делать. Реальная эффективная область кнопки на ховере, останется прежней в пределах ссылки.
Ваш вариант, абсолютно верный, просто я когда-то давно, почему-то решил, что спаном круче, чем псевдо элементом (типо излишне). Я ещё не сломал это предубеждение )
Сама линия, это обычный underline, который рисует браузер, только на 2-3 пикселя ниже и другого цвета. Висит на всех ссылках.

Стоит ли мне как-то закрыть или удалить эту тему?

[Ankhena]

MyQuestion, пожалуйста, https://jsfiddle.net/gLv71fmt/ табайте и всё покрасится.

Но если блок будет скрыт через display none, то ссылка никакого фокуса не получит.

я когда-то давно, почему-то решил, что спаном круче, чем псевдо элементом (типо излишне)

Излишне как раз, писать лишние элементы в разметку, если можно обойтись стилями.

[MyQuestion]

Ankhena,

Но если блок будет скрыт через display none, то ссылка никакого фокуса не получит.

Увы (

Излишне как раз, писать лишние элементы в разметку, если можно обойтись стилями.

Ну да, раздать всем ссылкам класс link, на него псевдо элемент.

Скажите, а такие правила не работают?

.link::after:not(:hover) {
  content: "";

  position: absolute;
  left: 0;
  right: 0;

  height: 1px;
  background-color: #ffbc9e;
}

Или это как-то по другому пишут?

[Ankhena]

after это псевдоэлемент, его нету и ховера, как и других состояний, у него нету.
Но состояния есть у ссылки.
.link:not(:hover)::after {}

Дарю :)
https://jsfiddle.net/fatm0sp3/

[MyQuestion]

Ого. А что, так можно было что ли?)
Спасибо ))