我有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>设置未悬停和悬停状态之间的 z-index 差异更大（例如，从 1 到 10）。
还可以在 z-index 上添加过渡...但仅限于返回默认状态时。
这样，当您将悬停从一个元素更改为另一个元素时，新悬停的元素将立即具有高 z-index，而未悬停的元素会慢慢地拉长它。新悬停的元素将位于前面。
演示：（关键样式放在第一位）
#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>