我有一个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;
}
希望这是有道理的。谢谢!
答案 0 :(得分:0)
因此,如果您创建了一个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%;