Schriftfarbe bei onMouseover

[shaq]

Hallo alle zusammen,

bevor ich die Frage stelle gleich vorweg, ich habe das ganze bereits gegoogled, habe selfhtml zu rate gezogen und habe im Archiv gewühlt. Mein Problem ist wohl auch eher das ich nicht direkt weiß nach was ich exakt suchen soll um eine Lösung zu finden. Mein Problem ist folgendes:

Ich habe eine Navigation in einer Tabellenzeile mit 5 spalten, in jeder Spalte steht ein Navi-Punkt. Beim überfahren der Spalte mit der Maus soll sich die Hintergrundfarbe ändern (mittels css), das klappt soweit auch. Ich möchte jetzt zusätzlich noch die Textfarbe in der überfahrenen Zelle (..wär auch ein guter name für ne deutschpunkBand aus den späten 80ern: die überfahrenen Tabellenzellen :-)) ändern; habe das jetzt auf verschiedenen Wegen schonmal probiert und auch von mir gefundene Lösungansätze miteinbezogen aber leider ohne erfolg, vielleicht weiß ja einer von euch wo der Fehler liegt oder ich die Lösung finde.

Bisher sieht das ganze so aus:
<td onMouseover='this.bgColor="#D1D1D1";this.style.cursor="hand";this.style.color="#876567"'.....>

Leider bewirkt das "this.style.color=..." gar nix.

Bedankt im Voraus.
shaq

[Dude]

Leider bewirkt das "this.style.color=..." gar nix.

Ich denke mal das sich das this.style auf die Tabelle und nicht auf den Text bezieht.
Darum funktioniert das mit dem Hintergrund und dem cursor aber nicht mit der Textfarbe.

Eine Lösung für das ganze fällt mir jetzt spontan nicht ein...

[fastix®]

Moin!

<td onMouseover='this.bgColor="#D1D1D1";this.style.cursor="hand";this.style.color="#876567"'.....>

Hm. Ändere doch lieber die komplette Klasse.

<td class="td_normal" onMouseover="this.className='td_hover'" onMouseout="this.className='td_normal'">

Jetzt brauchst Du im Stylesheet nur noch die entsprechenden Klassen zu hinterlegen:

.td_normal {}
.td_hover  {}

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[shaq]

hi,
erstmal danke an alle. Werde das mit der Klasse ausprobieren, das klingt vielversprechend.

weiterhin noch´n schönen Mittwoch.

[fastix®]

Moin!

hi,
erstmal danke an alle. Werde das mit der Klasse ausprobieren, das klingt vielversprechend.

Ich hab was noch besseres: CSS pur!

Definiere die Links als Block- Elemente und baue diese in die Tabelle ein.

Ein Beispiel?

http://www.diewohnung.de/ (Schau in den Quelltext)

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Thomas Luethi]

Hallo fastix,

Ich hab was noch besseres: CSS pur!

Definiere die Links als Block- Elemente und baue diese in die Tabelle ein.

Obwohl ich (als Berner) eigentlich sprichwoertlich langsam
sein sollte, bin ich stolz, dass ich mit der Antwort
[pref:t=51922&m=285802]
ein paar Minuten schneller war als Du.

http://www.diewohnung.de/ (Schau in den Quelltext)

"Wackelt" furchtbar rum in Opera 7.1, weil der Linktext
bei a:hover fett ist und im Normalzustand nicht...
(Jaja, altbekanntes Problem...)

mfg
Thomas

[fastix®]

Moin!

Hallo fastix,

Jaja... Du warst erster... egal.

"Wackelt" furchtbar rum in Opera 7.1, weil der Linktext
bei a:hover fett ist und im Normalzustand nicht...
(Jaja, altbekanntes Problem...)

Tja. Grundregel: In seltenen Browsern muss alles benutzbar bleiben. "Furchtbares wackeln" mute ich einer kleinen Zahl von Besuchern zu. Obwohl es leicht zu ändern wäre :)
Mein Standardbrowser ist der Mozilla... selbst der IE- Benutzer muß bei den Seiten die ich "für mich" mache gelegentlich für dessen Mängel bitter büsen :)

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[fastix®]

Moin!

»selbst der IE- Benutzer muß bei den Seiten die ich "für mich" mache gelegentlich für dessen Mängel bitter büsen :)

Und da ich davon ganz fürchterlich viele gemacht habe wird wohl Microsoft künftige Browser wohl erst mal auf meinen Seiten testen- weil ich die "Standards" bestimme *lach*

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Joachim]

Hi,

Ich möchte jetzt zusätzlich noch die Textfarbe in der überfahrenen Zelle (..wär auch ein guter name für ne deutschpunkBand aus den späten 80ern: die überfahrenen Tabellenzellen :-)) ändern;

d.h. also nicht erst, wenn die Maus auch ueber den Text (Link) faehrt?
Sowas kannst Du afaik nur mit Javascript loesen:
<html>
<head>
<script language="javascript1.2" type="text/javascript">
function swap(el) {
 if (el.style) {
  el.style.backgroundColor =  "blue";
  child                    =  el.firstChild;
  child.style.color        =  "red";
 }
}
</script>
<style type="text/css">
a {color: #000000;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="10" border="1">
<tr>
 <td onmouseover="swap(this)"><a href="#">test</a></td>
</tr>
</table>
</body>
</html>

hth + Gruesse  Joachim

[Thomas Luethi]

Hallo,

Bisher sieht das ganze so aus:
<td onMouseover='this.bgColor="#D1D1D1";this.style.cursor="hand";this.style.color="#876567"'.....>

Leider bewirkt das "this.style.color=..." gar nix.

Statt mit JavaScript kannst Du's auch gleich mit CSS machen.

td a { display:block; }
td a:link    { /* color und background-color ... */}
td a:visited { /* color und background-color ... */}
td a:hover   { /* color und background-color ... */}
td a:focus  { /* color und background-color ... */}
td a:active  { /* color und background-color ... */}

Das hat erst noch den Vorteil, dass es nur die Farbe aendert,
wenn die Maus wirklich ueber dem "Link" ist, also dass auch
etwas passiert, wenn der Benutzer klickt.

Bei Deinem JS-Gebastel aendert sich zwar die Farbe, aber
es passiert nur was, wenn der Benutzer auf den Text klickt.

HTH, mfg
Thomas

[shaq]

Hallo,
Danke für die Antwort, sie erscheint mit am besten geeignet für mich.
Aber ein Frage wäre da noch, wenn ich das so definiere:

td a { display:block; }
td a:link    { /* color und background-color ... */}
td a:visited { /* color und background-color ... */}
td a:hover   { /* color und background-color ... */}
td a:focus  { /* color und background-color ... */}
td a:active  { /* color und background-color ... */}

dann gilt es ja für alle anchor innerhalb von TDs auf der ganzen seite, wie kann ich das denn so definieren, das es nur innerhalb der einen Zeile bzw Tabelle gilt?
Etwa so:

.navBar td a {...}
.navBar td a:link{...}
   .
   .
   .

Dann müsste ich doch nur dem TR Tag mittels class='navBar' die anchor definitionen zuweisen oder?

Wäre nett wenn du da nochmal eben drauf eingehen könntest.

greetz
shaq

[Thomas Luethi]

Hallo,

.navBar td a {...}
.navBar td a:link{...}

Dann müsste ich doch nur dem TR Tag mittels class='navBar' die anchor definitionen zuweisen oder?

Genau.
Waehle einen Selektor, der fuer Deine Zwecke geeignet ist.
Eine Kombination aus Klasse/ID und Verschachtelung,
wie Du sie oben vorschlaegst, scheint mir sinnvoll.
Bei Unklarheiten hilft:
http://selfhtml.teamone.de/css/formate/zentrale.htm

Wäre nett wenn du da nochmal eben drauf eingehen könntest.

Kann ich - ich bin so nett ;-)

Uebrigens: Bei der Reihenfolge der Pseudoklassen bin ich nicht
ganz sicher, wo :focus stehen sollte.
Bei den uebrigen ist die Reihenfolge
link - visited - hover - active
die richtige.

Ich vermute, dass focus vor/nach hover hinkommt:
link - visited - hover - focus - active
oder so:
link - visited - focus - hover - active
(Focus kommt z.B. zum Zug, wenn jemand mit der Tabulator-Taste
ueber alle Links der Seite huepft.)

HTH, mfg
Thomas

[MudGuard]

Hi,

link - visited - hover - focus - active
oder so:
link - visited - focus - hover - active

Falsch ist keines von beiden - es kommt halt darauf an, was man erreichen will.
Soll bei dem fokussierten Element der hover-Effekt funktionieren (dann focus vor hover) oder ist der Fokus wichtiger (dann focus nach hover)?

cu,
Andreas

[molily]

Hallo,

Statt mit JavaScript kannst Du's auch gleich mit CSS machen.

td a { display:block; }

Und da seine fünf Spalten momentan wahrscheinlich nur für die Links gedacht sind und danach wahrscheinlich eine Zelle mit colspan="5" folgt, kann er aus den fünf Spalten eine machen, sich das colspan sparen und die Blocklinks mit float:left nebeneinandersetzen, sofern ihm die Kompatibilität ausreicht. Dann kann er auch gleich eine ul-Liste für die Links verwenden und entsprechend den li-Elementen das float:left zuweisen.

Mathias