Question

我要创建以下悬停效果：在悬停时，一个div（.left）应该扩展为全宽并覆盖另一个div（.right）。

这是我到目前为止的情况（jsfiddle）：

HTML

  </div>

  <div class="right">
     <img src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1548087392/ka6fgbjakjeskramtkew.jpg">
  </div>
</div>

CSS

.container {
  width: 100%;
}

.left {
  width: 67%;
  height: 100%;
  background: blue;
  float: left;
}

.right {
  width: 33%;
  height: 100%;
  float: right;
  z-index: -1;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
}

.container:hover .left {
  width: 100%;
}

JS（JQuery）

$(".container").css({'height':($("img").height()+'px')});

说明/要求：

图像的纵横比为1：1。 .container div的高度应该是图像的高度，而图像的高度又应该是.container div的33％的宽度。

问题

为什么图像的z-index设置为-1却为什么被下推？

我尝试了多种在网上找到的不同方法，但在我的情况下它们不起作用。例如，我不想将.right div的位置设置为position: absolute，因为我将忽略.container div的填充。

我该如何解决这个问题？

Answer 1

设置负边距，以避免将图像推到下一行。您还可以使用flexbox而不是float来简化代码，并且不再需要JS代码来设置高度：

.container {
  width: 100%;
  display:flex;
  flex-wrap:wrap; /*it will work even wrap enabled*/
}

.left {
  width: 67%;
  background: rgba(0,0,255,0.8);
  transition:1s;
}

.right {
  width: 33%;
  z-index:-1;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
  display:block;
}

.container:hover .left {
  margin-right:-33%;
  width:100%;
}

<div class="container">
  <div class="left">
  
  </div>
  
  <div class="right">
     <img src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1548087392/ka6fgbjakjeskramtkew.jpg">
  </div>
</div>

悬停效果：使div在另一个div上方流动

1 个答案: