@MyQuestion

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

Добрый день!

При наведение мышкой, на кнопку и на меню, кнопка остаётся подсвеченной:
.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>
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы