我遇到了一个奇怪的行为。 我有一个包含隐藏溢出的简单块。 触发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>

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键导航到第三块； 第一部的风格被打破了。

为什么会出现这种情况以及如何修复它？

谢谢