Farbe von Tabellenzeile ändern bei mouseover

[kkkurt]

Hallo,
ihr kennt sicher folgenden "Effekt" in phpMyAdmin:
Immer diejenige Zeile, über der man sich mit der Maus gerade befindet wird in einer anderen Farbe dargestellt als der Rest.

Das Ganze funktioniert offensichtlich durch diese Zeile

<tr  onmouseover="setPointer(this, 1, 'over', '#EEEEEE', '#f8e8a0', '#FFCC99');" onmouseout="setPointer(this, 1, 'out', '#EEEEEE', '#f8e8a0', '#FFCC99');" onmousedown="setPointer(this, 1, 'click', '#EEEEEE', '#f8e8a0', '#FFCC99');">

Die setPointer Funktion steht in einer extra .js-Datei

Ok, genau diesen "Effekt" hääte ich nun auch gerne. Hab also versucht das Ganze zu rekonstruieren und nachzubauen, aber es klappt leider nicht. Ich habe die .js-Datei heruntergeladen und in meine Testdatei eingebunden. Außerdem die Tabelle wie o.g. aufgebaut <tr  onmouseover="setPointer .....)

Im Ergebnis sehe ich jetzt immer die Hand als coursor wenn ich über eine solche Zeile fahre, aber an den FArben ändert sich nix.

Kann mir jemand helfen? Es muss natürlich nicht unbedingt auf dieses Bsp. aufbauen (selbst machen wär mir sowieso lieber).

danke schonmal, kurt

[D.R.]

Hallo,

Kann mir jemand helfen? Es muss natürlich nicht unbedingt auf dieses Bsp. aufbauen (selbst machen wär mir sowieso lieber).

Für solche Kleinigkeiten braucht man heutzutage kein JS mehr. Mit CSS lassen sich solche Effekte genauso gut erzielen:

td:hover {background-color:#ff0;}

mfg. Daniel

[kkkarl]

Für solche Kleinigkeiten braucht man heutzutage kein JS mehr. Mit CSS lassen sich solche Effekte genauso gut erzielen:

td:hover {background-color:#ff0;}

lol, perfekt!

Vielen Dank :-)

[Gernot Back]

Hallo kkkarl,

Für solche Kleinigkeiten braucht man heutzutage kein JS mehr. Mit CSS lassen sich solche Effekte genauso gut erzielen:

td:hover {background-color:#ff0;}

lol, perfekt!

Leider nicht im IE6!

Gruß Gernot

[kkkarl]

Hallo kkkarl,

Für solche Kleinigkeiten braucht man heutzutage kein JS mehr. Mit CSS lassen sich solche Effekte genauso gut erzielen:

td:hover {background-color:#ff0;}

lol, perfekt!

Leider nicht im IE6!

Gruß Gernot

Ah, ok. Damit kann ich glaub ich leben :)
Danke für den Hinweis!!

[Gernot Back]

Hallo kkkarl,

Leider nicht im IE6!

Ah, ok. Damit kann ich glaub ich leben :)

Vergiss nicht: Wer kein Windows XP hat, hat auch keinen IE7!

Gruß Gernot

[Jeena Paradies]

Hallo,

Vergiss nicht: Wer kein Windows XP hat, hat auch keinen IE7!

Aber Safari kann das doch auch, und Konqueror auch.

Jeena

[Daniel unreg]

Hallo,

Ah, ok. Damit kann ich glaub ich leben :)

Vergiss nicht: Wer kein Windows XP hat, hat auch keinen IE7!

Was ist mit 2003 und Vista?

Davon abgesehen spielt es bei so belanglosen Dingen wie td:hover mit Hintergrundfarbwechsel nun wirklich keine Rolle ob Browser XY das nun kann oder nicht. Hier keine Information versteckt sondern nur ein graphischer Effekt erzeugt.

Gruß;

[kkkarl]

Davon abgesehen spielt es bei so belanglosen Dingen wie td:hover mit Hintergrundfarbwechsel nun wirklich keine Rolle ob Browser XY das nun kann oder nicht. Hier keine Information versteckt sondern nur ein graphischer Effekt erzeugt.

Genau so seh ich es auch. Schön wenn's geht, wenn nicht....auch nicht tragisch.

[D.R.]

Hallo,

Leider nicht im IE6!

Ah, ok. Damit kann ich glaub ich leben :)

Vergiss nicht: Wer kein Windows XP hat, hat auch keinen IE7!

Aber vielleicht Firefox oder Opera. Die gibt's schließlich noch für ziemlich viele Systeme.

mfg. Daniel

[Gernot Back]

Hallo Daniel,

Vergiss nicht: Wer kein Windows XP hat, hat auch keinen IE7!

Aber vielleicht Firefox oder Opera. Die gibt's schließlich noch für ziemlich viele Systeme.

Vielleicht, ich schätze nur mal, dass IE7 und IE6 jeder für sich genommen einen größeren Nutzeranteil haben als alle anderen Browser mit all ihren Unterversionen zusammengerechnet.

Diesen Eindruck erweckt jedenfalls diese Statistik:

http://marketshare.hitslink.com/report.aspx?qprid=6&qpmr=55&qpdt=1&qpct=3&qptimeframe=M&qpsp=97

Die Bereitschaft der Nutzer nach einem entsprechenden Hinweis des Webseitenautors eine Seite, doch lieber noch einmal mit einem anderen Browser aufzurufen, dürfte auch ziemlich gering sein, selbst wenn entsprechnde Alternativbrowser bereits installiert sind.

Der Anteil derer, die sich deswegen aber erst einen anderen Browser herunterladen, dürfte gegen Null gehen. Unsereins hier im SELFHTML-Forum darf man da auch nicht als Maßstab für Otto Normalnutzer ansetzen.

Gruß Gernot

[D.R.]

Hallo,

Diesen Eindruck erweckt jedenfalls diese Statistik:

http://marketshare.hitslink.com/report.aspx?qprid=6&qpmr=55&qpdt=1&qpct=3&qptimeframe=M&qpsp=97

Komisch. Sonst heißt es immer, der Firefox habe bereits über 20% erreicht…

mfg. Daniel

[Orlando]

Statistik

http://marketshare.hitslink.com/report.aspx?qprid=6&qpmr=55&qpdt=1&qpct=3&qptimeframe=M&qpsp=97

Komisch. Sonst heißt es immer, der Firefox habe bereits über 20% erreicht…

Im Weblog erreicht er mittlerweile 59,6 %. Basis: 13.385 Besucher der letzten zwei Wochen.

IE        25,3 % (davon bereits 46,6 % mit IE7)
Opera      7,4 %
Safari     3,6 %
Mozilla    1,3 %
Konqueror  0,9 %
SeaMonkey  0,7 %
Netscape   0,4 %
Camino     0,3 %

Dieser Punkt ist allerdings dermaßen zielgruppenspezifisch, dass solche Detailergebnisse absolut irrelevant sind. Vermutlich werden nicht wenige Nutzer besserer Browser diverse Tracking-Dienste bewusst oder unbewusst blocken.

Roland

[kkkarl]

Hallo,

Kann mir jemand helfen? Es muss natürlich nicht unbedingt auf dieses Bsp. aufbauen (selbst machen wär mir sowieso lieber).

Für solche Kleinigkeiten braucht man heutzutage kein JS mehr. Mit CSS lassen sich solche Effekte genauso gut erzielen:

td:hover {background-color:#ff0;}

mfg. Daniel

Jetzt habe ich doch noch eine Frage. Ich will natürlich nicht jede Zeile Webseiten-weit einfärben, sondern nur ausgewählte Tabelle. Daher hab ich es wie filgt in mein css-sheet eingebaut

#table_highlight tr:hover{
  background-color:#ff0000;
}

Funktioniert aber leider nicht. Komischerweise folgendes aber schon:

#table_highlight td:hover{
  background-color:#ff0000;
}

Nur wird dann eben nicht die ganze Zeile sondern nur die jeweilige Zelle umgefärbt. Wie krieg ich das zeilenmäßig hin, bzw. warum funktioniert obiges Bsp. nicht?

Eingebaut habe ich es immer so:
<table>
 <tr id="table_highlight">
  <td>.....
 ....
</table>

danke nochmal
karl

[kkkarl]

Hallo,

Kann mir jemand helfen? Es muss natürlich nicht unbedingt auf dieses Bsp. aufbauen (selbst machen wär mir sowieso lieber).

Für solche Kleinigkeiten braucht man heutzutage kein JS mehr. Mit CSS lassen sich solche Effekte genauso gut erzielen:

td:hover {background-color:#ff0;}

mfg. Daniel

Jetzt habe ich doch noch eine Frage. Ich will natürlich nicht jede Zeile Webseiten-weit einfärben, sondern nur ausgewählte Tabelle. Daher hab ich es wie filgt in mein css-sheet eingebaut

#table_highlight tr:hover{
  background-color:#ff0000;
}

Funktioniert aber leider nicht. Komischerweise folgendes aber schon:

#table_highlight td:hover{
  background-color:#ff0000;
}

Nur wird dann eben nicht die ganze Zeile sondern nur die jeweilige Zelle umgefärbt. Wie krieg ich das zeilenmäßig hin, bzw. warum funktioniert obiges Bsp. nicht?

Eingebaut habe ich es immer so:
<table>
<tr id="table_highlight">
  <td>.....
....
</table>

danke nochmal
karl

Ok, war zu voreilig. Sorry. Hab grad selbst rausgefunden, dass id=xxx in den table-tag muss, dann gehts natürlich :)

AABER:
Nun ist auch die allererset Zeile betroffen (Spalten-Titel <th>). Wie kann ich die davon ausnehmen?

Vielen Dank
klar

[D.R.]

Hallo,

Eingebaut habe ich es immer so:
<table>
<tr id="table_highlight">
  <td>.....
....
</table>

danke nochmal
karl

Ok, war zu voreilig. Sorry. Hab grad selbst rausgefunden, dass id=xxx in den table-tag muss, dann gehts natürlich :)

Für solche grafischen Zuordnungen würde ich eher Klassen nehmen. Denn dann könntest du auch mehrere solcher Tabellen in einem Dokument verwenden.

AABER:
Nun ist auch die allererset Zeile betroffen (Spalten-Titel <th>). Wie kann ich die davon ausnehmen?

Du hast also Jeena's Vorschlag eingebaut. Den brauchst doch nur ein wenig zu kürzen.

tr:hover td { background: #ff0; }

Wenn du das nur in einer Tabelle mit der Klasse table_highlight möchtest, muss das so aussehen:

.table_highlight tr:hover td { background: #ff0; }

mfg. Daniel

[Jeena Paradies]

Hallo,

td:hover {background-color:#ff0;}

Hm, ich war immer der Meinung es müsste so lauten:

tr:hover td, tr:hover th { background: #ff0; }

Und übrigens, kleiner JS Tipp dazu: whatever:hover

Jeena

[Zeromancer]

Hallo Jeena,

Und übrigens, kleiner JS Tipp dazu: whatever:hover

sieht ja klasse aus. Danke für den Tipp.

Mit freundlichen Grüßen,
André

[D.R.]

Hallo,

td:hover {background-color:#ff0;}
Hm, ich war immer der Meinung es müsste so lauten:

tr:hover td, tr:hover th { background: #ff0; }

Stimmt. Ich hatte Tabellenzelle gelesen…

mfg. Daniel