在悬停时操纵div的位置

Question

我有两个独立的div，我想在他们的悬停状态下相互重叠。黄色div正在这样做，但我遇到了蓝色div的问题。正如您所看到的那样，它默认会向右扩展。无论如何要强制它向左，而不是增加其容器。

这是我正在使用的一个简化示例，所以不幸的是我99％确定.work-wrapper的相对定位必须说明。

https://jsfiddle.net/04vjcfLe/5/

我已尝试过容器上的最大宽度和其他一些技巧，但现在已经丢失了。

.work-container {
    width: 50%;
    max-width: 50%;
}

.work-wrapper {
    display: inline-block;
    position: relative;
    width: 49%;
    transition: all ease 0.8s;
}

Answer 1

解决方案1：

www.example.com

.work-container {
  width: 50%;
  max-width: 50%;
  position: relative;
  height: 100px;
}

.work-1, .work-2 {
  position: absolute;
  top: 0;
  bottom:0;
  width: 50%;
	transition: all ease 0.8s;
}

.work-1:hover, .work-2:hover {
  width: 100%;
	transition: all ease 0.8s;
}

.work-1:hover + .work-2 {
  width: 0%;
	transition: all ease 0.8s;
}

.work-1 {
	background-color: #FEF102;
  left: 0;
}

.work-2 {
	background-color: #4B3E7F;
  right: 0;
}

解决方案2：

在此解决方案中，没有绝对或相对定位，因此您可以随意设置它们。

<div class="work-container">
  <div class="work-1"></div>
  <div class="work-2"></div>
</div>

.work-container {
  width: 50%;
  max-width: 50%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100px;
}

.work-1, .work-2 {
  width: 50%;
  transition: all ease 0.8s;
}

.work-container .work-1:hover, .work-container .work-2:hover {
  width: 100%  !important;
  transition: all ease 0.8s;
}

.work-container:hover .work-1 {
  width: 0%;
  transition: all ease 0.8s;
}

.work-container .work-1:hover + .work-2 {
  width: 0%;
  transition: all ease 0.8s;
}

.work-1 {
	background-color: #FEF102;
  left: 0;
}

.work-2 {
	background-color: #4B3E7F;
  right: 0;
}

Answer 2

将float:right添加到课程工作-2，将z-index:6添加到.w-2：hover .work-2

＆＃13;

＆＃13;

.work-container {
  width: 50%;
  max-width: 50%;
}

.work-wrapper {
	display: inline-block;
	position: relative;
  width: 49%;
	transition: all ease 0.8s;
}

.work-1, .work-2 {
	transition: all ease 0.8s;
  width: 100%;
  padding-top: 100%;
	position: relative;
}

.work-1 {
	background-color: #FEF102;
	z-index: 5;
}

.work-2 {
	background-color: #4B3E7F;
    float:right;
}

.w-1:hover .work-1 {
	width: 202%;
  float:left;
}

.w-2:hover .work-2 {
	width: 202%;
  z-index:6;
}

＆＃13;

<div class="work-container">
 <div class="work-wrapper w-1">
  <div class="work-1"></div>
 </div>
 <div class="work-wrapper w-2">
  <div class="work-2"></div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;