圖像懸停與淡入淡出效果 - 保持居中

有沒有辦法懸停一個圖像，並用另一個替換而不使用絕對位置？圖像懸停與淡入淡出效果 - 保持居中

現在我的形象集中在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添加到圖像中是不可能的。它們在服務器上生成並作爲變量發送給我，以供在文檔中使用。

來源

2013-04-26 janhartmann

...只是想知道...如果圖像包含在正常流程中的包裝，這是絕對元素的孩子？然後你可以保持中心。對不起，如果我錯過了這一點... – Fico 2013-04-26 18:51:18

請發佈您的HTML和CSS。更好的是，如何工作jsFiddle的例子？ – j08691 2013-04-26 18:59:03

當我調整窗口大小時，我不知道圖像的大小。適合的圖像比例。 :-) – janhartmann 2013-04-26 18:59:13

Aaarrrrh！可以通過將max-width: 240px添加到span.image_hover來解決該問題。

來源

2013-04-26 19:02:54 janhartmann

圖像懸停與淡入淡出效果 - 保持居中

回答

相關問題