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?