Folgendes Problem: Der IE ist zu langsam.
Gewünschter Effekt:
Detailliertere Informationen sollen nur beim Bewegen des Cursors auf speziellen Text angezeigt werden
HTML:
CSS:
Funktioniert wunderbar... außer im IE, der kennt :hover leider nur bei Links
Lösung - Teil 1 (CSS):
Lösung - Teil 2 (JS):
Mit JS die Eventhandler onmouseover und onmouseout von div#stat_hover belegen. Bei onmouseout wird als CSS-Klassenname "off" gesetzt, bei onmouseover wird "over" gesetzt.
Danach wird - ebenfalls per JS - der CSS-Klassenname auf "off" gesetzt, um die Anzeige der Tabelle zu unterdrücken.
Das ganze in einen Conditional Comment, so dass nur der IE was von der JS-Krücke mitbekommt.
Ergebnis:
In allen Nicht-IEs funktioniert's wie gewünscht, egal ob JS aktiv ist oder nicht.
Im IE wird bei deaktiviertem JS die Tabelle einfach immer angezeigt, bei aktiviertem JS wird sie beim Laden der Seite ausgeblendet, danach funktioniert's auch wie gewünscht.
Problem:
Bei der Kombination IE und aktiviertes JS ist die Tabelle nach dem Laden der Seite für kurze Zeit sichtbar, nämlich eben so lange wie es dauert um vom Anzeigen der Seite bis zum Ausführen der Klassenänderung auf "off" zu kommen.
Hoffnung:
Es gibt eine Möglichkeit, die Tabelle im IE von Anfang an nicht anzeigen zu lassen, wenn JS aktiv ist.
Ich (wunsch)denke da an ein Stück cSS, das nur interpretiert wird, wenn JS aktiv ist.
Gibt's da was und wenn ja, wo?
Gewünschter Effekt:
Detailliertere Informationen sollen nur beim Bewegen des Cursors auf speziellen Text angezeigt werden
HTML:
Code:
<div id="stat_hover" class="over">hover to view detailed information <table id="stat_table"> <tr> <th>Irgendwas</th> <th>Nochwas</th> <th>Und nochwas</th> </tr> <tr> <td>Ein Wert</td> <td>Noch ein Wert</td> <td>Und noch einer</td> </tr> </table> </div>
Code:
div#stat_hover table{ display:none; } div#stat_hover:hover table { display:block; }
Lösung - Teil 1 (CSS):
Code:
div.over table { display:block; } div.off table { display:none; } div#stat_hover[id] table { display:none; } div#stat_hover:hover[id] table { display:block; }
Mit JS die Eventhandler onmouseover und onmouseout von div#stat_hover belegen. Bei onmouseout wird als CSS-Klassenname "off" gesetzt, bei onmouseover wird "over" gesetzt.
Danach wird - ebenfalls per JS - der CSS-Klassenname auf "off" gesetzt, um die Anzeige der Tabelle zu unterdrücken.
Das ganze in einen Conditional Comment, so dass nur der IE was von der JS-Krücke mitbekommt.
Ergebnis:
In allen Nicht-IEs funktioniert's wie gewünscht, egal ob JS aktiv ist oder nicht.
Im IE wird bei deaktiviertem JS die Tabelle einfach immer angezeigt, bei aktiviertem JS wird sie beim Laden der Seite ausgeblendet, danach funktioniert's auch wie gewünscht.
Problem:
Bei der Kombination IE und aktiviertes JS ist die Tabelle nach dem Laden der Seite für kurze Zeit sichtbar, nämlich eben so lange wie es dauert um vom Anzeigen der Seite bis zum Ausführen der Klassenänderung auf "off" zu kommen.
Hoffnung:
Es gibt eine Möglichkeit, die Tabelle im IE von Anfang an nicht anzeigen zu lassen, wenn JS aktiv ist.
Ich (wunsch)denke da an ein Stück cSS, das nur interpretiert wird, wenn JS aktiv ist.
Gibt's da was und wenn ja, wo?
Kommentar