当一个div位于另一个div之上并且底部在悬停时滑出时如何设置较低的宽度？

Question

我有一个 div 放在另一个上面。悬停时，底部 div（右侧灰色条）滑出，并且与顶部 div 宽度相同： http:// /d.pr/OB6N。我正在尝试创建带有幻灯片的图像网格。有没有办法将宽度设置为图像中所示的宽度？因为现在，当我检查元素时，宽度是顶部 div 和滑出 div（完全滑出时）的总和。

 HTML:
    <div class="poster">
     <img src="example.png" />
    </div>
    <div class="bottombox"></div>

CSS:

.poster {
    float: left;
    width: 250px;
    height: 375px;
    display: inline-block;
    position: relative;
    left: 0px;
    z-index: 1;
    -webkit-transition-duration: 0.2s;
}

.bottombox {
    float: left;
    width: 250px;
    height: 375px;
    display: inline-block;
    position: relative;
    left: -225px;
    -webkit-transition-duration: 0.2s;
}

.bottombox:hover {
    left: 0px;
}

希望这是有道理的。谢谢！

Answer 1

因此，如果您创建一个 jsfiddle 来玩，那么帮助您会更容易。也就是说，一种方法是使 .bottombox 成为 .poster 元素的子元素

<div class="poster">
  <img src="example.png" />
  <div class="bottombox"></div>
</div>

，然后将 .poster 的 css 更改为

width: auto

，将 .bottombox 的 css 更改为

width: 100%;
position: absolute;
left: 25px;

，最后将悬停定义设置为

left: 100%;