Dienstag, 11. Juli 2006
CSS: Hover-Effekt beim Internet Explorer in Tabellen
Der Internet Explorer ist immer noch der Browser mit den höchsten Marktanteilen. Trotzdem hat er einige gravierende Mängel. Einer davon ist, dass er standardmäßig keinen Hover-Effekt bei Tabellen darstellen kann, wenn dies mit CSS gelöst wird...
Wenn ich eine Webapplikation entwickle, passiert es mir manchmal, dass ich vergesse mir die Seite mit dem Internet Explorer anzuschauen (Firefox User). Wie aber schon angesprochen ist der Internet Explorer immer noch der Standardbrowser. Trotzdem ist er sehr eigen, was Webstandards betrifft. Mir geht es hauptsächlich um den Hover-Effekt bei Tabellen. Den Hover-Effekt kann man sehen, wenn man beispielsweise über einen Link fährt und dieser sich farblich verändert. Das wäre also so ein Hover-Effekt (Javascript muss eingeschaltet sein).
Problem
Das Problem, welches ich hatte betrifft den Hover-Effekt bei Tabellenzeilen wenn er mit "normalem" CSS gelößt wird. Mit anderen Browsern, Opera und Mozilla beispielsweise funktioniert das einwandfrei. Nur der Internet Explorer wollte mir den Hover-Effekt nicht zeigen. Wie so eine Stylesheet Definition aussieht, die beim Internet Explorer nicht geht könnt ihr in Listing 1 sehen.
Nachdem ich das Netz ein wenig abgesucht hatte, kam ich auf folgende Lösung, welche meiner Meinung nach eine gute Lösung ist um auch den Internet Explorer den Hover-Effekt bei Tabellen beizubringen.
Normalerweise wird beschrieben, dass man den Hover-Effekt bei Tabellen das Tag mouseover hinzufügen soll. Ein Beispiel hierzu könnt ihr in Listing 2 sehen. Das ist aber meiner Meinung nach sehr unhandlich, da man so alle Tabellen von Hand (oder mit Regulären Ausdrücken etc.) ändern müsste.
Meine Lösung nutzt auch CSS um dem Internet Explorer den Hover-Effekt beizubringen - nur mit einem kleinen Trick. So ist es an einer zentralen Stelle abgelegt und somit auch einfach änderbar. Wenn beispielsweise eine andere Farbe für den Hover-Effekt benutzt werden soll. Was auch öfters vorkommen kann, da ich ,wie viele Programmierer, Entwickler und kein Designer bin.
Lösung
Wir definieren also entweder im Head-Bereich der Seite, oder über eine externe Stylesheet Datei folgende Zeilen, die ihr in Listing 3 sehen könnt.
Der Trick dabei ist, das wir eine Expression anlegen (im CSS wird Javascript eingebettet). Dieser Expression wird nun mitgeteilt um welche Events es sich handelt (onmouseover / onmouseout) und registrieren eine neue Funktion, die beim Auslösen des Events aufgerufen wird. Die Funktionen wiederum ändern die Hintergrundfarbe der Tabellenzeile beim drüberfahren mit der Maus.
Als Farbe in dem Codebeispiel habe ich mal Schwarz (#000000) und Weiss (#ffffff) gewählt. Die müsst ihr natürlich euren Wünschen gemäß ändern.
Listing 1
- tr{
- background:#ffffff;
- }
- tr:hover{
- background:#000000;
- }
Listing 2
- <tr onmouseover="style.background='#000000';" onmouseout="style.background='#ffffff';">
Listing 3
- tr{
- hover:expression(this.onmouseover=new Function("this.style.background='#000000';"),this.onmouseout=new Function("this.style.background='#ffffff';"));
- }
marksu - #1 - 28.07.2006 12:03 - (Antwort)
hab das listing 3 am ie (6.0.2800.1106) probiert und der hängt sich auf dabei
Mr. Foo - #2 - 28.07.2006 16:34 - (Antwort)
Hallo Markus, welche Version vom Internet Explorer benutzt du?
Bernd - #3 - 31.10.2006 01:13 - (Antwort)
Einen Workarround findest Du evtl. auf folgender Seite (ganz unten):
http://de.selfhtml.org/css/layouts/navigationsleisten.htm
Oliver - #4 - 18.04.2007 11:47 - (Antwort)
Herzlichen Dank! genau das hab ich gesucht. Allerdings hab ich Listing 1 benutzt (inzwischen verstehen IE und Firefox diese Angaben und das reicht mir). Kleine Anmerkung: wenn man nicht will dass alle Tabellen das machen, kann man das in Klassen aufteilen.
tr.hoverorange
{background:#CCCCCC;}
tr.hoverorange:hover
{background:#FF9933;}
eins
zwei
eins
zwei
eins
zwei
eins
zwei
itsme - #5 - 21.06.2007 07:53 - (Antwort)
Eine weitere Möglichkeit wäre sämmtlichen Tabelleninhalt in Links zu verwandeln, diese lassen sich im IE6 auch ohne JS einfach mit CSS-hover Effekten hinterlegen. Komischerweise braucht der IE6 aber viel mehr CPU-Zeit für die Darstellung als die anderen "zeitgemässeren" Browser wie FF oder Opera...
PCMasters - #6 - 30.06.2007 21:44 - (Antwort)
Du hast mein Wochenende gerettet. Danke dir für deine Tipps. Die dritte Variante hat auch im IE geklappt.
Max - #7 - 04.07.2007 14:57 - (Antwort)
Ansich ist das ja eine schöne Sache dies mit CSS realisieren zu wollen, aber durch die Hilfe durch JavaScript ist der ganze nette Ansatz dahin, denn dann kannst Du CSS auch ganz weglassen und dies nur mit JavaScript erledigen.
JavaScript ist meiner Meinung nach immer der falsche Weg, dem User eine angemessene Umgebung zu bieten, da JavaScript immer mit dem Kopf in der Schlinge auf einem Holzbalken torkelt, bis der User keine Lust mehr auf ekelhafte PopUps hat und JavaScript baumeln lässt.
lg Max
Mr. Foo - #7.1 - 05.07.2007 00:18 - (Antwort)
@PCMasters
Freut mich, wenn ich dir helfen konnte.
@Max
Natürlich ist das der falsche Weg, dass Aussehen über Javascript zu mich bestimmen. Leider ist dies in diesem speziellen Fall nicht anders möglich, da der Internet Explorer den entsprechenden CSS-Code nicht interpretiert.
Ob sich das Verhalten in der neuen Version des Internet Explorers (7) geändert hat, muss ich bei Gelegenheit mal testen.
lasse - #7.1.1 - 31.12.2007 13:48 - (Antwort)
hat sich nix im ie 7 geändert aber wiso solte man da auch was ändern ich meine alles was eigentlich inzwischen standart ist muss man nicht unterstützen ( position: fixed usw);-)
lasse
Maria Brauer - #8 - 02.09.2007 17:40 - (Antwort)
Hallo,
ich finde deine Lösung gut. Meine Frage ist, ob man diesen Effekt auch bei einem img-Rahmen erreicht. Die Bilder dienen als Link und sollen als hover Effekt einen Rahmen bekommen. IE weigert sich natürlich.
Über einen Tipp würde ich mich freuen
Mr. Foo - #8.1 - 03.09.2007 10:23 - (Antwort)
Hallo Maria,
probiere mal das "tr" gegen "img" auszutauschen und "style.background" gegen "style.border" - dann musst du natürlich noch einen entsprechenden Wert dem Ramen zuweisen. Wie beispielsweise "boder:1px solid red".
Maria Brauer - #9 - 03.09.2007 11:03 - (Antwort)
super danke... mit ein bisschen rumexperimentieren, style hier style dort ... und voila, es funktioniert sogar im IE DANKE
Laurie - #10 - 26.10.2007 11:13 - (Antwort)
Hi!
Ich habe gerade das gleiche Problem und würde gerne die Lösung 3 verwenden. Allerdings mir Hintergrundbild, nicht mit Farbe. Da ich aber keine Ahnung von JS habe, weiss ich nicht wie die Syntax dafür aussehen muss.
Ich habe es gerade mal einfach so eingesetzt und dabei wurd mir dann alles zerschossen:
#nav #navTable tr.navQuestionRow {
hover:expression(this.onmouseover=new Function("this.style.background='url(../../images/exttestrun/OptaGuiGfx/hg_nav-o.gif) repeat-x';"),this.onmouseout=new Function("this.style.background='url(../../images/exttestrun/OptaGuiGfx/hg_nav.gif) repeat-x';"));
}
Ich wäre Dir echt dankbar, wenn du mir hier weiterhelfen könntest!
Laurie
Downlord - #10.1 - 17.01.2008 13:16 - (Antwort)
Ist zwar schon veraltet, jedoch wird vlt. jemand das selbe Problem haben.
Für Bilder musst du anstatt "background", "backgroundImage" verwenden. Also so:
#nav #navTable tr.navQuestionRow {
hover:expression(this.onmouseover=new Function("this.style.backgroundImage='url(../../images/exttestrun/OptaGuiGfx/hg_nav-o.gif) repeat-x';"),this.onmouseout=new Function("this.style.backgroundImage='url(../../images/exttestrun/OptaGuiGfx/hg_nav.gif) repeat-x';"));
}
Jewe - #11 - 27.08.2008 13:23 - (Antwort)
L3 ist eine sehr interessante Lösung.
Da ja nur der IE6 die Probleme macht ist diese Lösung in Kombination mit Conditional Comments genau das was ich gesucht habe. Also vielen, vielen Dank dafür.
Sebastian - #12 - 04.03.2010 17:20 - (Antwort)
Genial, genau das, was ich gesucht habe. Nur warum ist die "Animation", also der Farbwechsel im IE nur so langsam? So ganz flüssig sieht es nicht aus, im Vergleich zum CSS im Firefox.
Vor zwei Tagen hab ich euch erzählt, dass ich einen netten Bug im Internet Explorer gefunden habe. Das Ganze ist mehr oder weniger purer Zufall gewesen... Unter bestimmten Umständen lässt sich der Internet Explorer zu 100% auslasten. Somit wird er unb
Aufgenommen: Jul 26, 14:26