Question

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

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>

CSS ：

.edito {
  width: 273px;
  height: 211px;
  position: relative;
  border: 2px solid;
  overflow:hidden;

}

.edito .inner {
  position: absolute;
    left: 0;
  width: 100%;
  height: 195px;
  transition: top 0.8s ease;
  top: calc(100% - 50px);
}

.edito:hover .inner {
  background-color: purple;
  top: calc(100% - 150px);
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
img {
  position:relative;
}

现在，当某个人（例如，具有辅助功能问题）尝试按Tab键在这些块之间导航时，样式就会损坏。

您可以在这里看到它：

jsfiddle.net/0ubqwfxc

尝试按Tab键导航到第三块；第一个样式被破坏了。

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

谢谢

Answer 1

之所以中断，是因为当用户单击选项卡时，它将选择链接，并且链接会自动上升。要阻止他们专注于带有tab的链接，只需将属性tabindex="-1"添加到<a>标签中即可，例如<a href="#cta" tabindex="-1">See more</a>的工作示例：https://codepen.io/Ajjarindahouse/pen/qBbjERM

Answer 2

我设法通过这样处理选择器焦点来解决此问题：

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

可以在这里进行测试：http://jsfiddle.net/tzfoc0sr/

为什么在按下Tab键时，此焦点事件会破坏html样式？

2 个答案: