Как сделать так, чтобы при наведении на Подпункт 2.1 подсвечивался еще Пункт 2 в маркированном списке?

Question

Скажите, пожалуйста, как можно сделать с помощью css, чтоб при наведении на Подпункт 2.1 подсвечивался еще Пункт 2?

Вот код:

<style>
    ul > li > a:hover {
        color: red;
    } 
</style>
<ul>
    <li><a href="">Пункт 1.</a></li>
        <li><a href="">Пункт 2.</a>
            <ul>
                <li><a href="">Подпункт 2.1.</a></li>
                <li><a href="">Подпункт 2.2.</a></li>          
                <li><a href="">Подпункт 2.3.</a></li>
            </ul>
        </li>
    <li><a href="">Пункт 3.</a></li>
</ul>

Спасибо заранее)

Answer 1

Вы хотите задать стили для parent в зависимости от стилей ребенка. Это можно сделать с помощью псевдокласса :has

https://developer.mozilla.org/ru/docs/Web/CSS/:has

Есть правда небольшая проблема - сейчас он не поддерживается ни в одном из браузеров.

Видео как он работает: https://www.youtube.com/watch?v=aJ1XMcwys48

Answer 2

Можно добавить класс родителю и сделать что-то такое..

ul>li>a:hover {
  color: red;
}
.p2:hover {
  color: red;
}
.p2:hover ul:hover {
  color: red;
}

<ul>
  <li><a href="">Пункт 1.</a></li>
  <li class='p2'><a href="">Пункт 2.</a>
    <ul>
      <li><a href="">Подпункт 2.1.</a></li>
      <li><a href="">Подпункт 2.2.</a></li>
      <li><a href="">Подпункт 2.3.</a></li>
    </ul>
  </li>
  <li><a href="">Пункт 3.</a></li>
</ul>

БЛОГ НА HUSL

Как сделать так, чтобы при наведении на Подпункт 2.1 подсвечивался еще Пункт 2 в маркированном списке?

Ответы (2 шт):