单击后 Bootstrap 按钮轮廓保持突出显示

Question

我有以下 bootstrap 4 按钮代码。我发现只有在我的移动设备上，该按钮在单击后仍保持突出显示状态。它的颜色与我将鼠标悬停在桌面设备上时的颜色完全相同

<button class="btn btn-outline-primary d-inline">
  Search 
  <i class="fa fa-search float-right" aria-hidden="true"></i>
</button>

或者换句话说，这几乎与我单击桌面鼠标上的按钮并且不将鼠标悬停一样。

对我来说，似乎发生了以下情况之一

1. 在移动设备上，单击按钮模拟将鼠标移动到该点并触发单击事件。然而，移动设备上的“隐形”鼠标永远不会悬停？？

2. 还有别的事吗？

我怎样才能摆脱这种行为？

Answer 1

这是因为移动浏览器（现代浏览器）支持悬停状态。你可以做的就是在移动设备的情况下覆盖它

button.btn:hover {
    background-color: inherit || < your color >;
}