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

Question

我目前正在使用 onmouseover 和 onmouseout 在悬停时交换图像。这很好用，但现在我们想添加 this scroller 的效果- 基本上，添加功能，如果图像 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);
}