Question

我在li元素中彼此相邻有6张图片。现在，当我将其中一个悬停时，我想调整该图像的大小。这有效：

<img class="hoverific" width="35" height="35"  src="test.jpg" style="display: inline-block; width: 35px; height: 35px; overflow: hidden;">

CSS：

.hoverific {
    text-align: center;
    vertical-align: middle;
    width: 35px;
    height: 35px;
}

JS：

jQuery(".hoverific").hover(function() {
  jQuery(this).stop().animate({
    width: 360,
    height: 360,

  });
}, function() {
  jQuery(this).stop().animate({
    width: 35,
    height: 35,

  });
});

这会调整我悬停的图像大小，但会弄乱周围的一切。我希望使用jQuery平滑调整悬停图像的大小。方法是否正确，或者有更好的方法吗？

谢谢！

Answer 1

解决问题的方法是更改正在调整大小的图像的边距：

jQuery(".hoverific").hover(function() {
  jQuery(this).css("z-index",2).stop().animate({
    width: 360,
    height: 360,
    "margin-right": -325,
    "margin-bottom": -325,  
  });
}, function() {
  jQuery(this).css("z-index",1).stop().animate({
    width: 35,
    height: 35,
    "margin-right": 0,
    "margin-bottom": 0,
  });
});

-325的保证金变化来自-360 + 35（如果元素的初始保证金为0）。如果边距不为0，则使用-360 + 35 +右边（或底边）边距的值将position: relative;添加到您的css中以使z-index起作用（如果没有，您的扩展对象可能会被其他人部分覆盖）。

调整图像大小并使邻居保持原状？

1 个答案: