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 回答