我有 2 个 div，它们在一个容器内水平并排放置。我希望每个 div 在悬停时将宽度扩展到容器的整个宽度。 问题是，在指针不再悬停时，过渡后左侧 div(在 html 流中位于第一个)重叠在右侧 div 下。
这是一个例子。 要重新创建，只需将指针放在左侧 div 上，直到转换完成，然后将指针从 div 上移开。 期望的效果是宽度会逐渐减小(就像右边的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>最佳答案
animation 可以在这里解决问题。实际上 z-index 导致了这里的问题。您可以通过以下方式解决。
* { 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>关于html - 宽度过渡 - div 重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35722256/