Как я могу выбрать список внутри сфокусированного элемента списка с помощью CSS?

Я хочу сделать это, если пользователь сфокусируется на «<li><a href = "#">Kurumsal</a></li>», тогда непрозрачность ul внутри li будет равна 1.

Вот так: https://i.hizliresim.com/slkl93w.jpg Снимок экрана:

Как я могу выбрать список внутри сфокусированного элемента списка с помощью CSS?

<ul>
  <li><a href = "#">Kurumsal</a>
    <ul>
      <li><a href = "#">Hakkımızda</a></li>
      <li><a href = "#">Vizyon ve Misyon</a></li>
      <li><a href = "#">Kurucumuz</a></li>
      <li><a href = "#">Markalarımız</a></li>
      <li><a href = "#">Kalite, Çevre ve İş Sağlığı Güvenliği</a></li>
    </ul>
  </li>
</ul>

Но кто-то использовал это так: связь и скриншот: связь

Mutlu ŞEN 15.03.2022 14:44

Я только что отформатировал ваш код. Это последнее <ul> должно быть </ul>?

epascarello 15.03.2022 14:46

я исправил это @epascarello

Mutlu ŞEN 15.03.2022 14:48
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
3
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать focus и focus-within, и если вы хотите взаимодействие с мышью, добавьте hover

ul ul {
  opacity: .2;
  transition: opacity .5s;
}

ul a:hover + ul, 
ul a:focus + ul, 
ul ul:hover,
ul ul:focus-within {
  opacity: 1;
  transition: opacity 1s;
}
<ul>
  <li><a href = "#">Kurumsal</a>
    <ul>
      <li><a href = "#">Hakkımızda</a></li>
      <li><a href = "#">Vizyon ve Misyon</a></li>
      <li><a href = "#">Kurucumuz</a></li>
      <li><a href = "#">Markalarımız</a></li>
      <li><a href = "#">Kalite, Çevre ve İş Sağlığı Güvenliği</a></li>
    </ul>
  </li>
  <li><a href = "#">Kurumsal</a>
    <ul>
      <li><a href = "#">Hakkımızda</a></li>
      <li><a href = "#">Vizyon ve Misyon</a></li>
      <li><a href = "#">Kurucumuz</a></li>
      <li><a href = "#">Markalarımız</a></li>
      <li><a href = "#">Kalite, Çevre ve İş Sağlığı Güvenliği</a></li>
    </ul>
  </li>  
</ul>

Другие вопросы по теме