javascript - 悬停时图像更改/放大而不影响页面间距

Question

我目前正在使用 onmouseover 和 onmouseout 在悬停时交换图像。这很好用，但现在我们想添加这个滚动条的效果- 基本上，添加如果图像 A 是 20x20 并且悬停时显示的图像是 80x80 的功能 - 我怎样才能让悬停图像在“顶部”打开”的其他人，所以图像大小的增加不会影响容器或表？

有几个要求： 该解决方案需要在IE7中运行，并且必须能够在悬停时显示不同的、更大的图像。

Answer 1

您可以使用 CSS3 对其进行缩放。

这是一个变换的例子： scale - jsFiddle

这是我在示例中使用的代码：

<div class="box"></div>

.box {
    width: 50px;
    height: 50px;
    background-color: green;
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    -ms-transition: 0.1s ease-out;
}

.box:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -ms-transform: scale(1.4);
}