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();
  });

这个解决方案的问题是它需要绝对位置的图像，因此破坏中心位置 - 这是一个问题，因为网站是响应和调整大小图像是在左侧而不是在屏幕的中心（移动设备）。图像按比例缩放，仅用于最大宽度（240像素）。

无论如何，我可以在保持图像内联或居中的同时进行此转换吗？

我无法弄清楚图片的网址。因此，不可能在图像上附加_off / _on。它们在服务器上生成，并作为变量发送给我，以便在文档中使用。

Answer 1

Aaarrrrh！可以通过将max-width: 240px添加到span.image_hover来修复此问题。

图像悬停并具有淡入淡出效果 - 使其保持居中

1 个答案: