时间戳

首页 > 解决方案 > 为什么这个焦点事件在按下制表符时会破坏 html 样式？

javascript - 为什么这个焦点事件在按下制表符时会破坏 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>

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

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

谢谢

标签： javascripthtmlcss

解决方案

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

推荐阅读