Question

当图片悬停在350px时，它会推动周围的一切。

这段代码正常工作，但是当我悬停并且图片增长时，它会推动菜单或者向下推进。

我该怎么办？

#displaycar img
{
    height: 200px;
}
#displaycar img:hover
{

    height: 350px;

}

BTW我正在使用twitter bootstrap，我尝试过position: absolute;。有没有什么方法可以在悬停时增加尺寸，但不要推动什么都不要动。

Answer 1

将#displaycar（假定的父div）的高度设置为200px并添加overflow：visible;

#displaycar {
    height: 200px;
    overflow: visible;
}

Answer 2

我会在元素上使用z-index。保持初始布局上的值相等，但在悬停时使其更强（带到前面）

#displaycar img:hover
{
    z-index:[stronger value];
    height: 350px;
    position :[relative, absolute, fixed];
}

注意：要使用z-index，您必须使用其中一个位置值

Z-index优先考虑重叠元素（带到前面/后面）

here是关于这个主题的更多信息

Answer 3

这是可能的，但为了避免影响周围的内容，必须从文档流中删除元素本身;这是使用position: absolute最容易实现的，但不幸的是，这需要使用包裹元素，position: relative（或任何其他非static position值。包装元素必须定义宽度和高度，这可以自动完成（使用JavaScript或PHP（在许多其他选项中））。

例如，HTML：

<span>
    <img src="http://placekitten.com/400/400/" />
</span>
<p><!-- generic dummy content, excised for brevity --></p>

CSS：

span {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
}

span img {
    position: absolute;
    top: 0;
    left: 0;
    height: 150px;
    width: 150px;
    /* Vendor-prefixes removed, for brevity */
    transition: all 1s linear;
}
span:hover img {
    width: 400px;
    height: 400px;
    /* Vendor-prefixes removed, for brevity */
    transition: all 1s linear;
}

JS Fiddle demo

CSS图像悬停推送页面中的其他元素？

3 个答案: