Menu
I have 2 divs positioned horizontally next to each other inside a container. I want each div to expand width on hover to the full width of the container. The problem is that after the transition when the pointer is no longer hovering the left div (which is first in the html flow) is overlapped under the right div.
Here's an example. To recreate just place the pointer on the left div until the transition is finished, then take the pointer off the div. The desired effect is that the width will decrease gradually (just like the right div).
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover, #two:hover { width: 500px; z-index: 1; }<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
486
animation can do the trick here. Actually z-index cause the issue here. You can solve following way.
* { margin: 0; padding: 0; }
#wrap { position: relative; width: 500px; margin: 0 auto; }
#one, #two { height: 100px; position: absolute; transition: width 1s ease-out; }
#one { width: 300px; background: #49d7b0; animation: movedec 1s; }
#two { right: 0; width: 200px; background: #d8c800; }
#one:hover { animation: moveinc 1s forwards; -webkit-animation: moveinc 1s forwards; }
#two:hover { width: 500px; }
@keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
@keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}
@-webkit-keyframes moveinc {
from {width: 300px; z-index: 1;}
to {width: 500px; z-index: 1;}
}
@-webkit-keyframes movedec {
from {width: 500px; z-index: 1;}
to {width: 300px; z-index: 1;}
}<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>Set the z-index with more difference between the un-hovered and the hovered state (for instance, go from 1 to 10).
Add transition on the z-index also ... But only when going back to the default state.
This way, when you change the hover from one element to the other, the newly hovered element will have immediately the high z-index, while the un-hovered is slowly dreasing it. And the newly hovered element will be in front.
Demo: (with the key styles in first place)
#one:hover,
#two:hover {
width: 500px;
z-index: 10;
transition: width 1s ease-out, z-index 0s linear;
}
#one,
#two {
z-index: 1;
transition: width 1s ease-out, z-index 1s linear;
}
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
width: 500px;
margin: 0 auto;
}
#one,
#two {
height: 100px;
position: absolute;
}
#one {
width: 300px;
background: #49d7b0;
}
#two {
right: 0;
width: 200px;
background: #d8c800;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="z-index.css">
</head>
<body>
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
