輕觸手機后，移除按鈕懸停效果嗎？

Question

我有一個基本的JS抽認卡游戲。 有12個“答案按鈕”供用戶選擇。

在移動設備上，點按后，接聽按鈕將保持懸停效果/ focus（？）（在台式機和任何瀏覽器上均不會發生）。 從用戶的角度來看，這非常令人困惑，因為它看起來好像是應用程序/閃存卡被卡住或未更新。

我正在使用Bootstrap 4.1。

這是我的按鈕代碼，但是沒有什么不尋常的地方：

<button type="button" id="E" class="btn btn-lg btn-info ansBtn" value="E">Answer</button>

我看過類似的問題（但它們與引導3有關），建議使用錨標簽而不是按鈕標簽，但這是行不通的（有和沒有href屬性）。

我還嘗試了另一種建議來包括這部分jQuery，但它似乎也不適用於4.1。 我使用了按鈕ID和其他類名，但是沒有用。

 $(".btn").mouseup(function(){
     $(this).blur();
 });

建議？ 謝謝！

更新

所以這是最新的。 我添加了以下CSS。 這給移動用戶帶來了我想要的體驗（僅在單擊/點擊時背景顏色/邊框顏色會“閃爍”）。 但是，現在將Macbook Pro和觸控板一起使用時，效果不會發生！ 當我用觸控板單擊但不用觸控板點擊時，它可以工作。 :(

.btn.btn-info {
    background-color: #17a2b8
} 

.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active, 
.show > .btn-info.dropdown-toggle {
     background-color: #117a8b;
     border-color: #10707f;
 }

Answer 1

您始終可以在對象.onHover()或.onClick()事件上添加.setTimeout()函數。 這將使您的抽認卡在一定時間后翻轉/模糊。 另外，您只需更改應用程序的功能以用於移動瀏覽器，然后進行更改，因此您必須單擊以查看答案。 您還應該研究.focus()方法，並可能嘗試將焦點更改為頁面上的另一個元素。 如果以上方法均無效，則可能與jQuery有關。 我建議嘗試以這種方式選擇元素：

document.querySelector(".btn").onmouseup = function(){ this.blur(); });

要么：

document.querySelector(".btn").onmouseup = function(){ document.body.focus(); });