CSS: Preventing a property to affect on element until the end of transition

mrReiha Published at Dev

mrReiha

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.

Our problem! Check the jsFiddle link above

Fabrizio Calderan loves trees

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”) the z-index will take its initial value but only after 0.5 seconds (the duration of your expanding effect is 0.4 seconds)

.box {
   ...
   z-index: 1;
   -webkit-transition: z-index 0s .5s;   
      -moz-transition: z-index 0s .5s;   
           transition: z-index 0s .5s;   
}

.box:hover {
    -webkit-transition: z-index 0s 0s;
       -moz-transition: z-index 0s 0s;   
            transition: z-index 0s 0s; 
    z-index: 50;
}

example: http://jsfiddle.net/yjg2oach/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-19

Comments

0 comments

Prev: Ionic - Error: Cannot find module 'jshint' while building a release.apk

From Dev

Related Related

Article

CSS: Preventing a property to affect on element until the end of transition

CSS: Preventing a property to affect on element until the end of transition

CSS: A transition element does not affect other

CSS, hover one element, affect another with transition

CSS Transition on the 'content' property of :before pseudo element

CSS Transition on the 'content' property of :before pseudo element

Detect property of the transition end

Detect property of the transition end

Animation to Transition css property

CSS element transition

Disabling CSS transition in element

Don't ng-show element until ng-hide CSS transition is complete?

Preventing deconstruction of anonymous variable defined in macro until end of scope

Javascript CSS transition end firing at start of transition

css transform wait until transition is completed

CSS transition property is not working properly

CSS transition property on page exit

CSS transition height property not working

Trigger CSS transition on appended element

CSS transition on element leaving lines

CSS transition on newly created element

Pause css transition on before element

CSS hover transition for another element

CSS transition on element leaving lines

CSS: transition properties in element itself?

SequentialTransition .stop() doesn't wait until the transition end its cycle

Set css property without css transition

CSS transition for element A by hover element B

Define CSS Transition effect (Start and End Positioning)

CSS, hover one element, affect another

Margin CSS not taking affect to checkbox element