1

我使用来自fluent kit的数据表和分页，当点击（:active）时突出显示：

box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);

我希望它消失，但只有在点击时。我希望效果仅适用于:focus使用键盘完成的TAB按键。我认为仅使用 CSS 是不可能的。如果是的话，那就太棒了。如果没有，javascript / jquery 解决方案是可以接受的。

这是代码的简化示例：

.pagination {
  padding: 20px;
}

.pagination a {
  padding: 10px;
}

.pagination a:focus {
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.pagination a:active {
  border: 1px solid black;
}
<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

用于TAB更改<a>链接之间的焦点以了解我的意思。

编辑

因为它是外部插件，所以我不想使用其他 HTML 元素来工作，比如Enable :focus only on keyboard use (or tab press)。

4

2 回答 2

2

TAB单击时e.key === 'Tab' （或在e.keyCode=9ASCI 代码中）

在这里学习：https ://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

使用这个功能：

document.addEventListener('keydown', function(e) {
  if (e.key === 'Tab') {
   console.log('tab is clicked!')
  }
});
.pagination {
  padding: 20px;
}

.pagination a {
  padding: 10px;
}

.pagination a:focus {
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.pagination a:active {
  border: 1px solid black;
}
<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

或仅由 css

这个插件：https://github.com/ten1seven/track-focus 在 css 中：

body[data-whatinput="keyboard"] a:focus {
  box-shadow:  0 0 5px red;
}
于 2018-07-17T05:06:46.097 回答
0

我想你可能是这里的代码 

.pagination {
  padding: 20px;
}

.pagination a {
    padding: 10px;
    border: 1px solid transparent;
}

.pagination a:focus {
  outline:0;
  box-shadow: inherit;
}

.pagination a:active {
  border: 1px solid black;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
<div class="pagination">
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
</div>

于 2018-07-17T05:04:26.433 回答