有没有办法在不使用绝对位置的情况下悬停图像并将其替换为另一个图像?
现在我的图像以 a 为中心,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 附加到图像。它们在服务器上生成并作为变量发送给我以供在文档中使用。