jQuery“放大悬停”相对于图片中心的放大效果不佳

我得到了一些很好的帮助，以获得这个基本的部分，但现在我需要再次帮助:( 下面的javascript应该是这样的当您将鼠标悬停在画廊中的缩略图上时，缩略图会放大，我会增加高度和宽度，但我也会更改顶部和左侧偏移以进行补偿，以使其看起来像图片相对于缩略图的中心放大，而不是伸出朝右下方。jQuery“放大悬停”相对于图片中心的放大效果不佳

jQuery('.videogall-thumb').hover(function() { 
    var currThumb = jQuery(this).attr('id'); 
    jQuery('.videogall-thumb[id="' + currThumb +'"]').stop().animate({height: "100", width: "118", left: "-12", top: "-15"}, "fast"); 
}, function() { 
    jQuery('.videogall-thumb').stop().animate({height: "83", width: "98", left: "0", top: "0"}, "fast"); 
} 
);

至少这是我希望会发生。但缩略图仍伸出，而不是从中心扩大了。此外，缩略图日在放大的过程中，最终会放在该行的相邻缩略图下面，而不是放在它们之上，并且会推动下面一行中的相邻缩略图。看看我的意思是：http://oneworldyouthproject.org/tubepress-test/

我错过了什么？

来源

2012-08-22 user1323153

您需要将position: relative设置为您的img元素，以使left和top定位正常工作。

来源

2012-08-22 20:08:43

谢谢！这对解决居中问题非常有效。但是这张悬浮的图片仍然隐藏在其右边的邻居之下，并将其底层邻居推开。你知道如何解决这个问题吗？ – user1323153

您需要增加被鼠标移出的项目的'z-index'，您需要将其重置为默认的'z-index'。如果这不起作用，那么你可能必须将你的项目设置为'position：absolute'并且手动将它们放置在相对于它们的父项。 –

jQuery“放大悬停”相对于图片中心的放大效果不佳

回答

相关问题