2

さまざまな状態に合わせてスタイル設定されたボタンがあります。特に、押された ( :hover:active) とフォーカスされた ( :focus)。

:hoverただし、ボタンがフォーカスされて押されると、Google Chrome / Safari または:hover:activeFirefoxに変わります。どちらも:hover:active:focus期待通りにはいきません。

HTML テスト ケース:

<button>Test</button>

CSS:

button{background:#000000;color:#FFFFFF;border:1px solid #000000;padding:10px}
button:hover{background:#FF0000;color:#000000}
button:active{background:#00FF00}
button:hover:active{background:#FFFF00}
button:focus{background:#0000FF}
button:hover:focus{background:#FF00FF}
button:active:focus{background:#00FFFF}
button:hover:active:focus{background:#FFFFFF}

そして、これは簡単なテスト フィドルにあります: http://jsfiddle.net/CtKs8/。キーボードを使用してボタンにフォーカスした後 (青になる)、ボタンを押すと、Chrome では赤になり、Firefox では黄色 (白ではなく) になることに注意してください。

私の質問は、押された、フォーカスされた要素 ( など:hover:active:focus) を検出する方法、または少なくとも Chrome が:active:hoverFirefox のように状態を使用する方法を教えてください。

4

1 に答える 1