为什么这个焦点事件在按 Tab 时会破坏 html 样式？

Question

I am encountering a bizarre behavior. I have simple blocks that contains a hidden overflow. A hoover event is triggered to display the hidden overflow. the hidden part has position absolute.

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;
}

Now when someone (with accessibility issue for eg) tries to press tab to navigate between these blocks, the style is broken.

You can see this here:

jsfiddle.net/0ubqwfxc

Try to press tab to navigate to the third block; the style of first ones is broken.

Why this happens and how to fix it?

Thank you

Answer 1

It breaks because when the user clicks tab it selects the link and the link automatically goes up. To stop them from focusing on a link with tab simply add the attribute tabindex="-1" to your <a> tag like this <a href="#cta" tabindex="-1">See more</a> Working example: https://codepen.io/Ajjarindahouse/pen/qBbjERM

Answer 2

I managed to solve this by handling selector focus-within like this:

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

Can be tested here: http://jsfiddle.net/tzfoc0sr/