Javascript smooth fade - auch ohne CSS

[Nils Riel]

Ich würde gerne eine Seite mit ein paar Javascript-Effekten aufwerten. Hierbei würde ich vor allem gerne meine ganzen CSS a:hover Definitionen faden lassen. Das ganze ist z.B. hier schön zu sehen:
http://davidwalsh.name/dw-content/fading-links.php

Ich habe also folgendes probiert:

<script type="text/javascript">
window.addEvent('domready',function() {
    $each($$('a'), function(el) {
        var original = el.getStyle('background-color');
        var morph = new Fx.Morph(el,{ 'duration':'300', link:'cancel' });
        el.addEvents({
            'mouseenter' : function() { morph.start({ 'background-color':'blue' }) },
            'mouseleave' : function() { morph.start({ 'background-color': original }) }
        });
    });
});
</script> 

wobei diese Style-Angaben gelten:

<style type="text/css">
a {background:red;}
a:hover {background:blue;}
</style>

das Problem ist hierbei, dass der a:hover trotzdem ausgeführt wird. D.h. sowohl das Javascript Event "mouseenter", als auch der a:hover funktionieren - was zu Überlagerungen kommt - somit funktioniert der Effekt nicht.

Wie würdet ihr sowas machen? Am liebsten wäre es mir, wenn ich auch bestehende Seiten nur durch ein Javascript Code so aufwerten kann, ohne in die CSS Datei einzugreifen.

Ziel ist einfach ein Hover-Effekt sowohl mit als auch ohne JS, wobei der mit JS faden soll.

*Edit: 2 Stunden gesucht nichts gefunden, 2 Minuten nach dem Schreiben dieses Topics finde ich die Lösung, auch wenn diese mir nicht so 100% zusagt: http://www.peterkroener.de/flashige-...on-ohne-flash/ da ist man in der Gestaltung schon eingeschränkt.