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:hover像 Firefox 一样使用该状态？

4

1 回答 1

1

我相信focus，通常作为一个事件，当您单击按钮时根本不会触发。当您按住Tab直到到达所需元素时，它会被触发。Text input's 和textarea's 是例外，因为它们在单击时具有焦点。

我在事件文档中找不到明确的解释，但在这里你可以看到焦点事件类型文档。下面的一章是完全独立的一章鼠标事件类型，这表明鼠标行为与focus事件无关。

编辑：

我再次仔细阅读了您的问题，现在我想我终于理解了您的问题。当涉及到 abutton时，没有像 :active:hover:focus 这样的状态。如果一个按钮被聚焦，它会在你点击它后立即变得模糊（准确地说——在你按下鼠标之后）。所以没有办法把按钮active和focus状态放在一起。

当您单击焦点按钮时，根据 Chrome/Safari 上的红色，我猜这是一个错误。如果您将一个简单的处理程序绑定到按钮单击，就像这里一样，您将看到单击焦点按钮是有效的。不知道为什么:active没有触发。

于 2013-08-29T13:53:19.650 回答