Javascript 为什么按tab键时焦点事件会破坏html样式？

我遇到了一种奇怪的行为。我有一个包含隐藏溢出的简单块。将触发hoover事件以显示隐藏的溢出。隐藏部分具有绝对位置

HTML:

<div class='container'>
  <div class="edito">
    <img src="https://via.placeholder.com/273x211" />
    <div class="inner">
      <p>Lorem ipsum dolores</p>
      <a href="#cta">See more</a>
    </div>
  </div>

  <div class="edito">
    <img src="https://via.placeholder.com/273x211" />
    <div class="inner">
      <p>Lorem ipsum dolores</p>
      <a href="#cta">See more</a>
    </div>
  </div>

  <div class="edito">
    <img src="https://via.placeholder.com/273x211" />
    <div class="inner">
      <p>Lorem ipsum dolores</p>
      <a href="#cta">See more</a>
    </div>
  </div>
</div>

现在，当有人（例如，具有可访问性问题）尝试按tab键在这些块之间导航时，样式被破坏

你可以在这里看到：

jsfiddle.net/0ubqwfxc

尝试按tab键导航到第三个块；第一个的风格被打破了

为什么会发生这种情况以及如何解决

---

谢谢

它会中断，因为当用户单击选项卡时，它会选择链接，链接会自动上升。要阻止他们关注带有选项卡的链接，只需将属性

tabindex=“-1”

添加到您的

工作示例：

它会中断，因为当用户单击选项卡时，它会选择链接，链接会自动上升。要阻止他们关注带有选项卡的链接，只需将属性

tabindex=“-1”

添加到您的

工作示例中：

我通过如下方式处理选择器焦点来解决此问题：

.edito:focus-within .inner {
  top: calc(100% - 195px);
  transition: top 0s ease;
}

---

可在此测试：

http://jsfiddle.net/tzfoc0sr/

我通过如下方式处理选择器焦点来解决此问题：

.edito:focus-within .inner {
  top: calc(100% - 195px);
  transition: top 0s ease;
}

---

可在此测试：

http://jsfiddle.net/tzfoc0sr/

请在此处提供您的代码，以便将来的访问者可以访问该代码，并使其他人更容易进行贡献。我做到了。它位于共享的JSFIDLE链接上。你喜欢我把所有的都抄下来吗？完成，谢谢。请在这里提供您的代码，以便将来的访问者可以访问它，并使其他人更容易作出贡献。我做到了。它位于共享的JSFIDLE链接上。你喜欢我把所有的都抄下来吗？完成谢谢是的，完全同意，但主要目标是保持可访问性的活动，并给用户选择链接的可能性。添加

tabindex=“-1”

将不允许用户选择它。谢谢是的，完全同意，但主要目标是保持无障碍性活动，并让用户有可能选择链接。添加

tabindex=“-1”

将不允许用户选择它。非常感谢。