We've some boxes to show some data on hover. So, when we move mouse over one element, it should expand, get in front of other elements, and show the hidden data.
I did something like this:
box:hover {
z-index: 50;
}
But there's one problem; When we move mouse on another outer white space, the z-index
back to the value, same as others. So it's visible that hovered element is in lower layer than next one.
How to prevent a property to apply, until the end of transition?
Here's my jsFiddle. Try to hover on one element, move your mouse out of element and the background-image of other elements will be in front of our hovered element before the transition ends.
Update: this is the screen shot of problem. This is when we unhover on element. background-image
of another elements come in front of our hovered element.
Add a transition also for
z-index
, but insert a delay only when.box
is in normal state.Doing so the
z-index
will change istantly on hover, while on the opposite action (“unhover”) thez-index
will take its initial value but only after0.5
seconds (the duration of your expanding effect is0.4
seconds)example: http://jsfiddle.net/yjg2oach/