宽度过渡 - div 重叠答案

【问题标题】：width transition - divs overlapping宽度过渡 - div 重叠
【发布时间】：2016-03-01 11:56:00
【问题描述】：

我有 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 问题。您必须根据鼠标的位置来增加 z-index。我认为在第一印象中，仅使用 css 很难实现这一点

标签： html css

【解决方案1】：

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>

【讨论】：

在触发另一个转换的同时删除一个处理程序会更好

【解决方案2】：

在未悬停和悬停状态之间设置更大差异的 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>

【讨论】：

【解决方案3】：

这不是一个真正的问题，只是溢出必须工作的方式。你有两个选择：

1) 使用 CSS 关键帧动画 - 这样，您可以为悬停的 div 赋予更高的 z-index，并让反向动画保持更高的 z-index（在动画）。

2) 使用 javascript/jquery（如果您希望它在所有设备/浏览器上都能正常工作，无论如何我都会推荐 Jquery，它支持不支持 css3 的 IE8 等旧浏览器）

【讨论】：