我怎样才能 select 带有 CSS 的聚焦列表项中的列表？

Question

我想这样做，如果用户关注“<li><a href="#">Kurumsal</a></li>”，那么 li 内部的 ul 的不透明度将为 1。

像这样：https://i.hizliresim.com/slkl93w.jpg 截图：

<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>

Answer 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>

我怎样才能 select 带有 CSS 的聚焦列表项中的列表？

How can I select a list inside a focused list item with CSS?

html

css

select

html-lists