Keeping style applied using :hover until transition complete?

Question

I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.

Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?

Answer 1

You need to define the z-index, as well as animate it.

This works in Firefox (8.0.1) and Webkit.

Answer 2

You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/