移动设备上的引导按钮，单击后删除焦点更改

Question

单击主引导按钮后，它在移动设备上将其背景颜色更改为蓝色。

这里是一个例子，第一个按钮是点击前的样子，第二个是点击后的样子。如果我点击网站周围的任何地方，背景效果就会消失。

如何使这个背景不显示\被 js 或 css 中的命令删除。当我点击一个按钮时？

这是我的按钮 html：

<div class="col-md-4 col-xl-3 text-center optionsButtonsDiv displayNone">
                                <div class="card bg-light border">
                                    <button onclick="return tryToAnswer(this.id, 0)" runat="server" class="btn btn-outline-primary py-2 py-md-3 optionsButtons">בדיקה</button>
                                </div>
                            </div>

我在我的 CSS 上试过这个，它适用于我的计算机视图，而不是我的移动视图：

.optionsButtons:focus, .optionsButtons:active {
outline: none !important;
box-shadow: none;

}

也在js上试过这个，结果和第一个一样：

window.document.activeElement.blur();

谢谢。

Answer 1

将此添加到您的 CSS 中：

@media (hover: hover) {
.optionsButtons:hover {
    /*Add your button hover styles here*/
}}

这将禁用移动设备上的焦点效果，非常适合我的网站！