✔ onMouseDown - onmouseover - onmouseout

[Thomas_Jung]

Hallo

Ich möchte bei einem Input-Feld mit der Maus die Farbe verändern.

1 Beim onMouseOver Farbe1
2 Beim onMouseDown bzw. OnClick Farbe2
Solange wie der cursor sich im Input-Feld befindet soll die Farbe2 sein

Erst beim Verlassen des Input-Feldes soll es die Farbe3 annehmen

Mein Versuch scheidert natürlich beim onMouseOut

onMouseOver="this.className=Farbe1
onMouseDown="this.className=Farbe2
onMouseOut="this.className=Farbe3

Gibt es eine andere Möglichkeit dieses vorhaben umzusetzen.

Sollte im Firefox 3.0 und IE 7.0 funktionieren

Gruß Thomas

 

[Maik]

Hi,

ersetz mal onmouseout durch onblur.

onmousedown bzw. onclick könnten auch durch den Event onfocus ersetzt werden.

mfg Maik

 

[Thomas_Jung]

Hi Maik
Mit onfocus bleit das Feld zwar eingefärbt.
Sobald ich aber die Maus vom Feld entferne um ins Feld zuschreiben wird es wieder weiss.

Ich versuche folgendes zu Realisieren

Wenn man in einer Liste mit der Maus über die Eingabefelder
geht soll das Feld über dem man sich befindet mit einer Farbe einfärben
und beim verlassen wieder weiss werden.

Wenn man dann in ein Feld in der Liste klickt um den Inhalt zu bearbeiten
soll es mit einer anderen Farbe einfärbt beiben solange man sich in
diesem Feld befindet.

Ist so etwas möglich

Gruss Thomas

 

[Maik]

Selbstverständlich ist das möglich.

<style type="text/css">
.Farbe1 { background:red; }
.Farbe2 { background:yellow; }
.Farbe3 { background:green; }
</style>

<input type="text" onmouseover="this.className='Farbe1';" onfocus="this.className='Farbe2';" onblur="this.className='Farbe3';">

mfg Maik

 

[Thomas_Jung]

Hi
Maik

Das ganze Funktioniert nur wenn man ein Einzelnes Feld hat.

Ich benötige so etwas in einer Liste.

Gruß Thomas

 

[Maik]

Hi,

ich kann hier keine Einbußen in der Funktionalität feststellen.

<ul>
    <li><input type="text" onmouseover="this.className='Farbe1'" onfocus="this.className='Farbe2'" onblur="this.className='Farbe3'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onfocus="this.className='Farbe2'" onblur="this.className='Farbe3'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onfocus="this.className='Farbe2'" onblur="this.className='Farbe3'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onfocus="this.className='Farbe2'" onblur="this.className='Farbe3'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onfocus="this.className='Farbe2'" onblur="this.className='Farbe3'"></li>
</ul>

mfg Maik

 

[Thomas_Jung]

Hi Maik

Wenn ich bei deinem Beispiel mit der Maus über die Felder fahre werden
sie alle ROT.

Und bleiben ROT

Wenn sie wieder weiß werden würden wäre das Problem gelöst.

Gruß Thomas

 

[Maik]

Wenn ich bei deinem Beispiel mit der Maus über die Felder fahre werden
sie alle ROT.

Und bleiben ROT

Wenn sie wieder weiß werden würden wäre das Problem gelöst.

Wenn's weiter nichts ist

.Farbe1 { background:red; }
.Farbe2 { background:white; }
.Farbe3 { background:yellow; }
.Farbe4 { background:green; }

<ul>
    <li><input type="text" onmouseover="this.className='Farbe1'" onmouseout="this.className='Farbe2'" onfocus="this.className='Farbe3'" onblur="this.className='Farbe4'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onmouseout="this.className='Farbe2'" onfocus="this.className='Farbe3'" onblur="this.className='Farbe4'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onmouseout="this.className='Farbe2'" onfocus="this.className='Farbe3'" onblur="this.className='Farbe4'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onmouseout="this.className='Farbe2'" onfocus="this.className='Farbe3'" onblur="this.className='Farbe4'"></li>
    <li><input type="text" onmouseover="this.className='Farbe1'" onmouseout="this.className='Farbe2'" onfocus="this.className='Farbe3'" onblur="this.className='Farbe4'"></li>
</ul>

mfg Maik

 

[Thomas_Jung]

Hi Maik

Wenn ich bei deinem Beispiel mit der Maus über die Felder fahre werden
sie alle GELB und bleiben GELB.

Hast du das mal getestet?

Gruß Thomas

 

[Nord-Süd-Richtung]

Hi

hast du einen Link zu der Seite wo du das testest? Ansonsten poste doch mal bitte deinen momentanen Quellcode, da ich in Maiks keinen Fehler erkennen kann.