我目前正在使用 onmouseover 和 onmouseout 在悬停时交换图像。这很好用,但现在我们想添加 this scroller 的效果- 基本上,添加功能,如果图像 A 是 20x20 并且悬停时显示的图像是 80x80 - 我怎样才能让悬停图像在其他图像“之上”打开,这样图像大小的增加不会影响容器或表格?
有一些要求:该解决方案需要在 IE7 中运行,并且必须能够在悬停时显示不同的、更大的图像。
最佳答案
您可以使用 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);
}
关于javascript - 悬停时图像更改/放大而不影响页面间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11835836/