Question

我有一个针对各种状态设置的按钮。特别是，按下（:hover:active）并关注（:focus）。

但是，如果该按钮处于焦点并被按下，则会在Google Chrome / Safari中更改为:hover或在Firefox中更改为:hover:active。不要按预期转到: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:hover状态作为Firefox？

Answer 1

我相信focus，通常作为一个事件，当你点击一个按钮时根本不会被触发。按住 Tab 直到达到所需元素为止。文字input和textarea是例外情况，因为它们在点击时会得到关注。

我无法在事件文档中找到明确的解释，但HERE您可以看到焦点事件类型文档。其中一章完全独立的章节Mouse Event Types表明鼠标行为与focus事件无关。

修改

我再次仔细阅读你的问题，现在我想我终于理解了你的问题。当谈到button时，没有以下状态：active：hover：focus。如果一个按钮被聚焦，它就会在你完成它之后立即变得模糊（确切地说 - 在你刚刚完成它之后）。因此，无法将按钮同时放在active和focus状态。

根据Chrome / Safari上的红色，当您点击一个聚焦按钮时，我想这是一个错误。如果您将一个简单的处理程序绑定到按钮，请单击here，您将看到单击一个聚焦按钮的工作原理。我不知道为什么:active没有被触发。

检测：悬停：活动：焦点状态

1 个答案: