jquery - 具有淡入淡出效果的图像悬停 - 使它们居中

Question

有什么方法可以在不使用绝对位置的情况下将图像悬停并替换为另一个图像？

现在我的图像位于 span (display: block;) 和 text-align: center; 的中心，这很好。

我尝试了多种解决方案，将图像添加到文档并使用 jQuery 切换它们:

$("span.image_hover").hover(function() {
    $(this).find("img:not(.secondary)").stop(true, true).fadeOut();
    $(this).find("img.secondary").stop(true, true).fadeIn();
  }, function() {
    $(this).find("img:not(.secondary)").stop(true, true).fadeIn();
    $(this).find("img.secondary").stop(true, true).fadeOut();
  });

此解决方案的问题是它需要图像的绝对位置，因此会破坏中心位置 - 这是一个问题，因为网站是响应式的，并且在调整大小时图像位于左侧而不是屏幕中央(移动设备)。图像经过缩放，仅在最大宽度 (240px) 的情况下使用。

无论如何我可以在保持图像内联或以某种方式居中的同时进行这种转换吗？

我无法弄清楚图像的 URL。所以附加 _off/_on 到图像是不可能的。它们在服务器上生成并作为变量发送给我以供在文档中使用。

Answer 1

啊啊啊!它可以通过将 max-width: 240px 添加到 span.image_hover 来修复。