I have a problem with 2 divs dividing a container in 2 width 50% width.
When hovering over one it extends to 60/40%.
The problem is: While hovering over 1 (So it is extended) then quickly hovering over the other, the z-index is clipping.
check out this fiddle for an example: https://jsfiddle.net/h9vs79as/
I need the new transition to fire after the reversing transition has ended...
HTML
<div class="container">
<div class="one">div 1</div>
<div class="two">div 2</div>
</div>
CSS
.container { height: 200px; width: 500px; position: relative; }
.container div { position: absolute; height: 200px; width: 50%; z-index: 100; transition: all .5s ease; }
.one { left: 0; background-color: #00ff00; }
.two { right: 0; background-color: #ff00ff; }
.container div:hover { width: 60%; z-index: 150; transition: all .5s ease; }