javascript - CSS jQuery hoverZoom 悬停效果，页面加载结果不同

Question

我创建了一个植物数据库，客户想要每种植物的小图片，当您将鼠标悬停在它上面时，它会变大。我从这里找到了一个似乎可以工作的 jQuery:https://github.com/jmar/jquery-hoverZoom

第一次加载页面并且您将鼠标悬停在图像上时，图像未在灰色框中居中(它向下移动)。在您第一次将鼠标悬停在图像上之后的任何时候，它都会在框中居中。我不明白为什么这只会在您第一次加载页面时发生。我有一个工作正常的“测试”页面。当您第一次将鼠标悬停在植物上时，植物的缩略图也会在页面上移动位置。

我对 jQuery 知之甚少，所以如果这是导致问题的原因，我不确定如何解决它。我怀疑有一些冲突的 CSS，但找不到它。

不工作:http://briggs.honeycombsites.com/plants/product-search/ (注意:点击这里的任意一种植物，都会带你进入设置悬停的植物页面)

测试页:http://briggs.honeycombsites.com/test/ (第一次工作正常)

另外 - 这在 Chrome 或 Safari 中似乎不起作用 :( 一旦您第一次将鼠标悬停在图像上，缩略图就会完全消失。

Answer 1

您可以按照以下基本语法将比例应用于翻转时的元素:

CSS

.yourClass {   
   transform: scale(1, 1);   
   transition: all .5s ease-in-out;
}

.yourClass:hover {   
   transform: scale(3, 3);   
}

如果您在 div 中有该元素，我相信您必须将其应用到父 div 中。此外，对于跨浏览器功能，请务必在转换和转换中使用 vendor 前缀:

 -webkit-
 -moz-
 -o-
 -ms-