@MyQuestion
junior-middle fullstack

Как достучаться до элемента при ховере по другому элементу, через css?

Добрый день!

Вот такая структура:
<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>
              </ul>
            </li>

Мне нужно, при выпадение блока с подменю, находясь в этом блоке, убрать border-bottom с кнопки, само свойство повесил на класс link-underline.
Что я делаю:
.site-list__item:hover > .link-underline,
.site-list__item:focus > .link-underline {
  border-bottom: none;
}

Это не работает.

Но при этом, обращаясь к элементу уровнем выше (сама ссылка), я могу с ней воздействовать таким способом:
.site-list__item:hover > .site-list__link,
.site-list__item:focus > .site-list__link {
  color: #323232;

  background-color: #f8f7f4;
}


Получается, я не могу добраться до вложенного спана в ссылку.

Так же, я пробовал положить ссылку ниже списка, и сделать вот так:
.site-list__sub-menu:hover ~ .link-underline,
.site-list__sub-menu:focus ~ .link-underline {
  border-bottom: none;
}

И это, конечно же, тоже не сработало.

Делать огромную вложенность не пробовал.
На JS могу, но хочу на CSS.

Что я делаю не так?
  • Вопрос задан
  • 256 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы