html - 嵌套级别选项卡不工作 HTML CSS？

Question

我在这里添加了我的代码和演示链接点击这里

这里有一些列表项，每个列表都包含一些操作按钮，以便在鼠标悬停时“编辑、删除”仅可见操作按钮，并且根据 WCAG，我希望通过按选项卡到下一个按钮和列表来显示操作按钮。

使用选项卡按下时我无法选择操作按钮。

我想先选择列表，然后选择操作按钮

每个列表都一样

.action {
  display: none;
}

button {
  margin: 5px;
}

ul li:focus .action {
  display: block;
}

ul li:hover .action {
  display: block;
}

<p>This is admin menu list</p>

<ul>
  <li tabindex="0">Collection 1
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 2
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 3
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 4
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 5
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
</ul>

标签： htmlcss

Answer 1

当你Tab，焦点移动到按钮，离开li。您的 CSS 规则使得li失去焦点将隐藏按钮的容器。

您可以使用:focus-within而不是:focus解决此问题。它适用于具有焦点或包含具有焦点的元素的元素。

不幸的是，IE 或 Edge 不支持它，但我相信它是唯一不涉及 JavaScript 的解决方案。

.action {
  display: none;
}

button {
  margin: 5px;
}

ul li:focus-within .action {
  display: block;
}

ul li:hover .action {
  display: block;
}

<p>This is admin menu list</p>

<ul>
  <li tabindex="0">Collection 1
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 2
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 3
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 4
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
  <li tabindex="0">Collection 5
    <div class="action"><button>add</button><button>edit</button></div>
  </li>
</ul>