CSS图像悬停推动页面中的其他元素？答案

【问题标题】：CSS image hover pushes other elements in the page?CSS图像悬停推动页面中的其他元素？
【发布时间】：2013-06-27 06:22:11
【问题描述】：

当图像悬停到350px 时，它会推动所有内容。

此代码可以正常工作，只是当我将鼠标悬停并且图片变大时，它会推动菜单或向下移动。

我怎样才能阻止这种情况？

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

    height: 350px;

}

顺便说一句，我正在使用 twitter 引导程序，并且我尝试过 position: absolute;。有什么方法可以在悬停时仍然增加大小，但不要推动任何东西都不要移动。

【问题讨论】：

标签： html image css hover

【解决方案1】：

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

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

【讨论】：

这行得通@commodoretimo，但如果这个父级是一个 div，我会在其中多放几张可能具有不同 ID 和大小的图像，但我想一直保持这种效果？

【解决方案2】：

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

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

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

Z-index 优先考虑重叠的元素（放在前面/放在后面）

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

【讨论】：

【解决方案3】：

这是可能的，但为了避免影响周围的内容，必须从文档流中删除元素本身；这是使用position: absolute 最容易实现的，但不幸的是，这需要使用带有position: relative（或任何其他非staticposition 值）的包装元素。包装元素必须定义宽度和高度，这可以自动完成（使用 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.

【讨论】：