CSS Rollover- oder Glow-Bild anzeigen, wenn der Mauszeiger über eine Bildverknüpfung bewegt wird, ohne von der Bildgröße abhängig zu sein?

Question

Ich habe zwei Bilder normal.png und glow.png und beide sind die gleiche Größe , aber ich weiß nicht, was diese Größe ist.

würde ein normales Bild Link wie folgt aussehen:

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

Wenn über den Link schwebt, kann ich glow.png statt normal.png erscheinen, das heißt wie ein Rollover-Bild?

Ich fand alle Arten von CSS-Lösungen dafür, Sprites oder: Hover-Hintergrundbilder, aber sie alle hängen davon ab, die Bildgröße im Voraus zu wissen. Das trifft nicht auf meine Situation zu, da meine Bilder dynamisch sind.

Ich benutze HTML5.

Answer 1

ein Pseudo-Elememt Overlays wäre die ideale Lösung scheinen:

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

Da dieser Artikel sagte, können Sie es wie folgt tun:

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

See working fiddle

Aber es ist nicht vollständig kompatibel zu jedem Browser.

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