Html 当用户悬停在我们正在显示的div按钮上时，键盘访问不适用于带按钮的内部div。如何实现可访问性？

我有两个按钮的div容器。当用户鼠标悬停或键盘焦点时，我显示该按钮。我无法通过键盘访问这些按钮

下面是我的示例HTML和CSS代码

<div class="ui-col ui-dropzone" tabindex="0">
    <div class="ui-edit-bar">
        <div class="label"></div>
        <button tabindex="0" data-action="edit">Edit Row</button>
        <button tabindex="0" data-action="edit">Edit Col</button>
    </div>
</div>

.ui-col:hover, .ui-col:focus {
  border: 1px dashed #17a2b8;
}

.ui-edit-bar {
  display: none;
  position: absolute;
  height: 30px;
  width: max-content;
  padding: 0 8px;
  color: #FFF;
  font-family: sans-serif;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10000;
}

.ui-col:hover > .ui-edit-bar,  
.ui-col:focus > .ui-edit-bar {
  display: block;
}

编辑行
编辑列
.ui列：悬停，.ui列：焦点{
边框：1px虚线#17a2b8；
}
.ui编辑栏{
显示：无；
位置：绝对位置；
高度：30px；
宽度：最大含量；
填充：0 8px；
颜色：#FFF；
字体系列：无衬线；
字体大小：11px；
空白：nowrap；
z指数：10000；
}
.ui列：悬停>.ui编辑栏，
.ui列：焦点>.ui编辑栏{
显示：块；
}

---

能够使用键盘访问div。但我无法通过键盘访问按钮。

您的CSS导致了问题

仅当聚焦

时才显示编辑栏

当您聚焦该div中的某个项目时，它不再具有焦点，因此它将恢复为

display:none

s

您可以使用伪选择器并将父级不透明度设置为0，但对

：focus in

的支持还不是很好

.ui-col.ui-dropzone{
不透明度：0；
}
.ui-col.ui-dropzone:悬停，
.ui-col.ui-dropzone：焦点在{
不透明度：1；
}

编辑行
编辑列

这是一个问题还是一个简单的陈述？