出现 :focus-visible 的元素答案

【问题标题】：Element appearing with :focus-visible出现 :focus-visible 的元素
【发布时间】：2022-07-22 00:43:48
【问题描述】：

在我的项目中，我有一个可以收藏的“结果项”列表，然后它们会出现在页面一侧的收藏列中。

为了让键盘用户轻松访问，我创建了一个隐藏的 cta，允许他们直接跳到他们最喜欢的项目，而不必先浏览所有结果项目。

我只希望这个 cta 在它被选项卡时可见。我的理解是 :focus-visible 可以实现这一点。但是，由于某种原因，它对我不起作用。我的 html 和 css 看起来像：

<div class="sr-only-focusable">
    <button tabindex="0" @click="skipToShortlist">Skip To Shortlist</button>
</div>



  .sr-only-focusable {
  position: absolute;
  visibility: hidden;
  left: 56%;
  top: rem(65);
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  background-color: $white;
  padding: 1rem 2rem;
  z-index: 10;
}

.sr-only-focusable:focus-visible {
  visibility: visible;
}

谁能帮我弄清楚我哪里出错了？

提前致谢

【问题讨论】：

标签： html css

【解决方案1】：

按钮元素是您尝试使用标签的内容，而不是包含它的 div。与其尝试到达 div，不如定位按钮。此外，请使用不透明度，因为可见性似乎与 tabindex 不匹配

.sr-only-focusable {
  position: absolute;
  left: 56%;
  top: rem(65);
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  background-color: $white;
  padding: 1rem 2rem;
  z-index: 10;
}

button {
  opacity: 0;
}

button:focus-visible {
  opacity: 1;
}

<div class="sr-only-focusable">
  <button tabindex="0" @click="skipToShortlist">Skip To Shortlist</button>
</div>

【讨论】：