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%;

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

1 个答案: