Question

我有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>

Answer 1

animation 可以在这里解决问题。实际上z-index会导致此问题。你可以通过以下方式解决。

＆＃13;

* { 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;}
}

＆＃13;

<div id="wrap">
		<div id="one"></div>
		<div id="two"></div>
	</div>

＆＃13;

Answer 2

将z-index设置为非悬停状态和悬停状态之间的差异（例如，从1到10）。

在z-index上添加转换也...但仅在返回默认状态时。

这样，当您将悬停从一个元素更改为另一个元素时，新悬停的元素将立即具有高z-index，而未悬停的元素将慢慢地将其清除。而新悬停的元素将在前面。

演示:(首先是关键风格）

＆＃13;

#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;
}

＆＃13;

<!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>

＆＃13;

Answer 3

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

1）使用CSS关键帧动画 - 这样，您可以为悬停的div提供更高的z-index，并使用反向动画保持z-index更高（将其放回到最后的较低索引处）动画）。

2）使用javascript / jquery（如果你希望这在所有设备/浏览器上运行良好，我会推荐Jquery，它支持IE8等不支持css3的旧浏览器）

宽度转换 - div重叠

3 个答案: