CSS懸停在圖像鏈接上時顯示翻轉或發光圖像，而不取決於圖像大小？

Question

我有兩個圖像normal.png和glow.png和兩者都是相同的大小，但我不知道這個大小是什麼。

一個正常的圖片鏈接應該是這樣的：

<a href='http://example.com'> 
    <img src='normal.png'> 
</a> 

當鼠標懸停在鏈接，我可以讓glow.png出現，而不是normal.png，即像一個鼠標經過圖像？

我發現了各種各樣的CSS解決方案，使用精靈或者：懸停背景圖片，但它們都依賴於提前瞭解圖片大小。這不適用於我的情況，因爲我的圖像是動態的。

我正在使用HTML5。

Answer 1

僞elememt覆蓋，似乎理想的解決方案：

body { 
 
    text-align: center; 
 
} 
 
a { 
 
    margin: 1em; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
a:hover:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-image: url(http://www.fillmurray.com/140/100); 
 
} 
 
img { 
 
    display: block; 
 
}

<a href='http://example.com'> 
 
    <img src='http://www.fillmurray.com/g/140/100'> 
 
</a>

Answer 2

正如這篇文章所說，你可以做這樣的：

a:hover img { 
    content:url("http://lorempicsum.com/futurama/255/200/2"); 
} 

See working fiddle

但它不是在每一個瀏覽器完全兼容。

Is it possible to set the equivalent of a src attribute of an img tag in CSS?