a:hover - farbe per javascript ändern

[Dominik Schäfer]

hi, ich muß die a:hover-farbe per javascript ändern - oder alternativ genau das verhindern.

es geht um links, die auf mouseover gegenseitig ihre farbe verändern, um eine zusammengehörigkeit zu symbolisieren.
ich ändere also bei mouseover die farbe eines anderen links, und bei mouseout wieder zurück.

danach ist aber die hover-farbe des links weg - wenn ich über javascript die link-farbe ändere, ändert er wohl die hover-farbe gleich mit.

weiß jemand, wie man das lösen kann? möglichst ohne die hover-farben generell über javascript zu simulieren?

[Axel Richter]

Hallo,

es geht um links, die auf mouseover gegenseitig ihre farbe verändern, um eine zusammengehörigkeit zu symbolisieren.
ich ändere also bei mouseover die farbe eines anderen links, und bei mouseout wieder zurück.

danach ist aber die hover-farbe des links weg - wenn ich über javascript die link-farbe ändere, ändert er wohl die hover-farbe gleich mit.

weiß jemand, wie man das lösen kann? möglichst ohne die hover-farben generell über javascript zu simulieren?

Setzte bei onmouseout die Eigenschaft style.color nicht auf eine Farbe, sondern auf einen Leerstring. Beispiel:

_____________________________________________________________________
<style type="text/css">
 a, a:link, a:visited, a:focus, a:active {
   color:black;
 }
 a:hover {
   color:green;
 }
</style>

<p>Test onmouseout ..style.color='black' <a id="tl1" href="#" onmouseover="document.getElementById('tl2').style.color='red';" onmouseout="document.getElementById('tl2').style.color='black';">Testlink1</a>

<a id="tl2" href="#" onmouseover="document.getElementById('tl1').style.color='red';" onmouseout="document.getElementById('tl1').style.color='black';">Testlink2</a></p>

<p>Test onmouseout ..style.color='' <a id="tl3" href="#" onmouseover="document.getElementById('tl4').style.color='red';" onmouseout="document.getElementById('tl4').style.color='';">Testlink3</a>

<a id="tl4" href="#" onmouseover="document.getElementById('tl3').style.color='red';" onmouseout="document.getElementById('tl3').style.color='';">Testlink4</a></p>
_____________________________________________________________________

Im ersten Absatz tritt Dein Problem auf, im zweiten Absatz tritt es nicht auf. Getestet im IE6.0 und in FireFox1.0.7.

Das Rücksetzen auf 'inherit' hatte ich zunächst probiert, weil es mir am logischsten erschien. Es funktionierte aber nicht. Im IE kam  Fehler:ungültiger Eigenschaftswert (naja ;-)), im Gecko gab es das  selbe Verhalten, wie bei 'black'.

viele Grüße

Axel

[Dominik Schäfer]

verstehe zwar überhaupt nicht, wieso das dann die hover-farbe nicht ändert, aber hauptsache, es funktioniert. vielen dank!

[Axel Richter]

Hallo,

verstehe zwar überhaupt nicht, wieso das dann die hover-farbe nicht ändert,

Das ist so unlogisch nicht;-)). Die CSS-Information, dass ein A-Element eine bestimmte Farbe a {color:black} haben soll und bei :hover eine andere, muss der Browser ja irgendwo speichern. Mit JavaScript element.style.color="black"; greifst Du nun auf den selben Speicherbereich zu und überschreibst die gespeicherte Farbe. Da JavaScript aber nur _eine_ Farbe für style.color je Element setzen kann, überschreibst Du damit auch den :hover-Wert. Das Setzen der Farbe auf einen Leerstring setzt _keinen_ Wert für style.color und überschreibt so auch nichts. Das erklärt auch das Verhalten der Geckos bei element.style.color="inherit";. Warum allerdings element.style.color=null; nicht den selben Effekt hat, wie element.style.color="";, muss ich noch herausfinden.

viele Grüße

Axel