Style preservation is applied using: hover until transition is complete?

Question

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

Here's a jsFiddle that demonstrates this. Mouse over A; he goes over. However, the mouse is from him, and she is behind B. I need her to stay in front of B until the transition is complete. Is there an elegant way to do this?

Answer 1

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

This works in Firefox (8.0.1) and Webkit.

Answer 2

You need to also set the z-index : http://jsfiddle.net/uHJwT/2/

Answer 3

Try using transitions like http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section for .item and .item:hover )

The trick is to use transitions for the z-index property. You can set, for example, a value of 10 for ordinary items and 11 for freezes. You should also use transition-delay so that the animation to move the mouse does not immediately reset z-index . Then add another value in transition-delay to the rule for :hover with a value of 0, so the z-index really updated immediately when the mouse moves to the element.

In short, .item has a mouse transition from an element and a .item:hover rule for moving a mouse.

Answer 4

Here is one solution: http://jsfiddle.net/uHJwT/4/

Essentially, it uses another wrapper div that is wide enough and high to cover the animated surface - when hovering, it raises its z-index so that the animated div stays on top. Of course, this is not a fully functional solution - it is based on the fact that a typical departure from the movement will be down, and it works for this - but pointing in the diagonal direction will not work. But this seems like a reasonable CSS-only solution - I would rather use js to get the perfect fit.