刪除：active和：focus上的輪廓，但不刪除：focus上的輪廓

Question

我使用流利工具包中的數據表和分頁，當單擊（ :active ）時，突出顯示為：

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

我希望它消失，但只有在單擊時才消失。 我希望效果僅對使用鍵盤， TAB鍵完成的:focus 。 我認為僅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中：僅專注於鍵盤使用（或按Tab鍵） 。

Answer 1

在TAB單擊e.key === 'Tab' （或ASCI代碼中的e.keyCode=9 ）

在這里學習： 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

此插件： 在CSS中使用 https://github.com/ten1seven/track-focus ：

body[data-whatinput="keyboard"] a:focus {
  box-shadow:  0 0 5px red;
}

Answer 2

我想你可能是這里的代碼

 .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>