轻触手机后，移除按钮悬停效果吗？

Question

I have a basic JS flashcard game I made. There are 12 "answer buttons" for a user to choose from.

On mobile, the answer buttons retain the hover effect/focus(?) after being tapped (this does not happen on desktop, any browser). This is very confusing from a user standpoint as it can appear as though the app/flashcard is stuck or not updating.

I'm using Bootstrap 4.1.

Here is my button code, but there's nothing unusual about it:

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

I've looked at similar questions (but they were regarding bootstrap 3), which suggested using either an anchor tag instead of the button tag, but that didn't work (with and without the href attr).

I've also tried another suggestion to include this bit of jQuery, but it doesn't seem to work with 4.1 either. I've used button ID, and other classnames, but it has not worked.

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

Suggestions? Thanks!

Update

So here is the latest. I've added the below CSS. This give mobile users the experience I want (a "flash" of background-color/border-color change only on click/tap). HOWEVER, now when using my macbook pro and TAPPING with my trackpad, the effect does not occur! It works when I click with the trackpad, but not tap with the track pad. :(

.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

You can always add a .setTimeout() function on the objects .onHover() or .onClick() event. This will allow your flashcard to be flipped/blurred after a certain amount of time. Alternatively, you can simply change the functionality of your application for mobile browsers and make it so you have to click to see the answer. You should also look into the .focus() method and possibly try to change focus to another element on the page. If none of this is working, it is probably some quirk with jQuery. I would suggest trying to selct the element this way:

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

or:

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