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);
}

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

1 个答案: