jquery - HTML 按钮无法控制 "on focus"功能

Question

困惑...我已经尝试过 CSS 和 JQuery，但似乎无法使焦点功能在我的 HTML 按钮上正常工作。这是 Firefox 54。

我所有的按钮都有一个灰色背景，在“悬停”时变成浅蓝色。文字为黑色。这些颜色似乎是“默认”。

我已经通过转到

设法摆脱了按钮焦点文本周围的虚线框

button::-moz-focus-inner {
  border: 0;
} 

但如果我去，例如，

button::-moz-focus-inner {
  color: green;
  background-color: red;
} 

...聚焦时，文本不会变绿，背景也不会变红。
我也试过:

button :focus {
    background-color: blue;
}

...没有效果。
我还尝试通过

检测焦点事件

$(document).ready( function()
{
    $( 'button' ).focus( function(){
        console.log( '£ button got focus' );
    });
    ... 

...当我将焦点放在任何按钮上时没有任何反应!

我自然也尝试在这里进行谷歌搜索。我似乎缺少一些基本的东西!我尝试查看任何可能干扰“正常”机制的 CSS，但无济于事。

有人知道发生了什么事吗？

Answer 1

我试过稍微编辑一下您的代码，我相信最终结果就是您要找的。您可以在这里查看 JSFiddle:https://jsfiddle.net/c9mbtrz0/

最终，您需要为 CSS 和 JS 部分做的是:

$(document).ready(function() {
  $('button').focus(function() {
    console.log('£ button got focus');
  });
});

button:focus {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Test
</button>