如何使用 CSS 选择焦点列表项内的列表？

Question

我想这样做，如果用户聚焦“

Kurumsal

”，那么 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>