Detect :hover:active:focus state

Question

I have a button which is styled for various states. Particularly, pressed (:hover:active) and focussed (:focus).

But if the button was focussed and is pressed, it changes to :hover in Google Chrome / Safari or :hover:active in Firefox. Neither go to :hover:active:focus as expected.

HTML test case:

<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}

And here it is in a simple test fiddle: http://jsfiddle.net/CtKs8/. Note that after focussing the button using the keyboard (so it goes blue), pressing it makes it go red in Chrome, or yellow in Firefox (instead of white).

My question is: how can I detect a pressed, focussed element (like :hover:active:focus), or at a minimum get Chrome to use the :active:hover state as Firefox does?

Answer 1

I believe that focus, generally as an event, is not fired at all when you click on a button. It is fired when you keep pressing Tab until you reach desired element. Text input's and textarea's are exceptions, since they're focused when clicked.

I couldn't find clear explanation in events documentation but HERE you can see Focus Event Types documentation. One chapter down there is completely separate chapter Mouse Event Types which suggests that mouse behaviours are not related to focus events.

EDIT:

I read your question carefully once again and now I think I finally understand your problem. When it comes to a button, there is no such state as :active:hover:focus. If a button is focused it becomes blur immediately after you clik on it (to be precise - after you just mousedown on it). So there's no way to put button both in active and focus states together.

According to the red color on Chrome/Safari when you click on a focused button, I guess this is a bug. If you bind a simple handler to the button click like here you'll see that clicking on a focused button works. I don't know why :active is not triggered.