HTML-Frage

Fightmeyer · Beitrag von **Fightmeyer** » 26.05.2009, 07:54

Hallo Leute,

ich hab mal ne Frage an die HTML-Profis unter euch.

Ich baue mir via VB eine HTML Datei zusammen. Das ganze funktioniert auch prima im Firefox. Im IE (habs mit Ver. 6 und höher probiert) wird allerdings ein Hover-Over-Effekt nicht angezeigt.

Hier die entscheidenden Teile aus der HTML.

Code: Alles auswählen

<style type="text/css">
a.info
{position:relative;z-index:1;text-decoration: none;}
a.info:hover
{z-index:2;}
a.info span
{display: none;}
a.info:hover span
{display:block;position:absolute;top:2em;left:2em;width:30em;border:1px solid black;background-color: orange;}
</style>

Und der eigentliche Aufruf des Effekts.

Code: Alles auswählen

<td><a class="info">Text in der Tabellenzelle (LINK)
<span>
1. Zeile vom Text im Hover-Over-Fenster<br>
2. Zeile vom Text im Hover-Over-Fenster<br>
3. Zeile vom Text im Hover-Over-Fenster<br>
4. Zeile vom Text im Hover-Over-Fenster<br>
</span>
</a></td>

Passieren soll eigentlich nur folgendes:
Man geht mit der Maus über den Link und man wird halt nicht wirklich irgendwohin verlinkt, sondern bekommt eine Art PopUp-Fenster, mit etwas Text drin. Das verschwindet sofort wieder, wenn man mit der Maus den Bereich des Links verlässt. Wie gesagt: Auf dem Firefox klappts problemlos. Nur der IE macht zicken.
Unglücklicherweise soll das ein Hilfstool für die Firma werden und dort wird ausschließlich der IE eingesetzt.

Wie muß ich das umbauen, damit es doch funktioniert?
Muß eventuell noch oben der Style angepaßt werden?

Fightmeyer · Beitrag von **Fightmeyer** » 26.05.2009, 09:15

Hab jetzt mal folgendes versucht und den Link selber auch noch mal in ein "SPAN"-Tag gepackt. Das funzt jetzt auch im IE. Das CSS sieht jetzt so aus:

Code: Alles auswählen

<style type="text/css">
span.tooltip {position:relative;text-decoration: none;}
span.tooltip a {text-decoration: none;}
span.tooltip a:hover {text-decoration: none;}
span.tooltip a span {display:none;text-decoration: none;}
span.tooltip a:hover span { display: block; text-decoration: none; position:absolute; width: 250px; padding: 10px; color: black; background-color: Orange; border: 1px solid black;}
</style>

Ein Problem hab ich allerdings noch.
Das Popup ist transparent. Es verdeckt nciht die dahinterliegenden Links. Das geht wahrschienlich irgendwie mit z-index im CSS, aber ich hab keinen Plan wie. Hat jemand nen Tipp?!

Hans · Beitrag von **Hans** » 26.05.2009, 09:21

Der IE kann das, was du willst - bis einschließlich Version 6 - nur bei semantisch korrektem <a>-tag. Du müsstest also noch ein href in den Tag setzen, dann ginge es. Beschrieben ist das z.B. bei http://www.css4you.de/hover.html - die Seite ist generell sehr nützlich, was css und Browserkompatibilität betrifft.

Beispiel:

Code: Alles auswählen

<body>
<td><a href="/" class="info">Text in der 

Tabellenzelle (LINK)
<span>
1. Zeile vom Text im Hover-Over-Fenster<br>
2. Zeile vom Text im Hover-Over-Fenster<br>
3. Zeile vom Text im Hover-Over-Fenster<br>
4. Zeile vom Text im Hover-Over-Fenster<br>
</span>
</a></td>
</bod>
</html>

Oder du machst es einfach per JavaScript/onmouseover (falls das in deiner Firma erlaubt ist), beschrieben z.B. hier

Fightmeyer · Beitrag von **Fightmeyer** » 26.05.2009, 09:36

Danke für den Tipp.

Mit der oben beschriebenen Lösung klappt es nun klaglos.

Hab jetzt auch das mit der Transparenz gelöst bekommen.

Code: Alles auswählen

<style type="text/css">
span.tooltip {text-decoration: none;}
span.tooltip a {text-decoration: none;}
span.tooltip a:hover {text-decoration: none;position:relative;}
span.tooltip a span {display:none;text-decoration: none;}
span.tooltip a:hover span { display: block; text-decoration: none; position:absolute; width: 250px; padding: 10px; color: black; background-color: Orange; border: 1px solid black;}
</style>

das "position:relative;" mußte bei span.tooltip a:hover hin. Dann klappts.

EDIT: JS mußte ich ausschließen, da ich wirklich nur HTML verwenden wollte, um nicht bei unseren strengen Sicherheitsrichtlinien anzuecken.

HTML-Frage

HTML-Frage

Re: HTML-Frage

Re: HTML-Frage

Re: HTML-Frage