CSS transition affecting box accessibility/mouse-sensitivity

Question

I have a user interface situation that i recreated in this jsFiddle. Please have a look.

Basically, the box element should always overlap all others when it is visible (when its parent field is in state :hover. This seems to work fine, visually - but try to move your mouse over the box element while it is still in transition. You will notice that the :hover on the parent element becomes obsolete, causing the box to close again.

However, if you wait a few moments longer before you move the mouse downwards (shortly before the transition ends or once it is done), you will see that the box remains open.

I did tests modifying z-index, even trying to make z-index part of the transition, but to no avail. The problem persists.

Why is this happening?

And how can i modify the CSS definitions in a way that box will open on :hover over field using the given CSS transition fluid and yet being fully accessible (frontmost) from the very first moment the transition starts?

Notes:

I only need this to work in Chrome exclusively.

In my live environment i use a much faster transition, but i made it much longer in this example, because it is easier to test.

I solved this issue by applying a declining z-index on each of the field elements, but i don't like this approach at all because it is a workaround, not a solution.

Answer 1

Give the parent .field:hover { z-index:1; } and change .field > .box { position: absolute; ... } to .field > .box { position: relative; ... }. This is to not remove the boxes from the flow of the page and to allow each field to be placed over the others when hovered

Demo