|
|||
Div wird bei a:hover im IE nicht angezeigt
Hallo Leute,
habe folgendes Problem: Ich habe in ein Div ein img hineingelegt und darüber mit absoluten Positionen Links gesetzt (mit einem ähnlichen Effekt wie bei einem Imagemap). Wenn man über diese Links drüberfährt sollen wiederum mit absoluten Positionen dazugehörige div-Boxen angezeigt werden. Diesen Effekt hab ich mit visibility:hidden im Normalzustand und visibilty:visible beim Hover gemacht. Funktioniert auch überall einwandfrei, außer im Internet Explorer.. habe schon ewig lang recherchiert, aber nichts zu dem Thema gefunden. Habs auch schon mit display:none und display:block versucht, aber es hat sich nichts verändert. Hier der HTML-Code: HTML-Code:
<div id="imagemap"> <img src="../images_neu/infographic.png" alt="Infographic" border="0" /> <a href="#" style="height: 135px; width: 135px; position: absolute; left: 240px; top: 37px"></a> <div style="left: 200px; top: -195px;" > <p> <p>Text...</p> </div> <a href="#" style="height: 135px; width: 135px; position: absolute; left: 349px; top: 341px"></a> <div style="left: 320px; top: 160px;" > <p>Text...</p> </div> <a href="#" style="height: 135px; width: 135px; position: absolute; left: 128px; top: 341px"></a> <div style="left: -150px; top: 200px;" > <p>Text...</p> </div> <a href="#" style="height: 135px; width: 135px; position: absolute; left: 67px; top: 150px"></a> <div style="left: -210px; top: -50px;" > <p>Text...</p> </div> </div> Code:
#imagemap a:hover { cursor: default; } #imagemap a + div { background-color: white; border: 1px solid gray; visibility: hidden; padding: 20px; position: absolute; z-index: 100000; width: 400px; } #imagemap a:hover + div p:first-child { padding-top: 0px; } #imagemap a:hover + div p { color: #1a1a1a; line-height: 14px; } #imagemap { position: relative; } #imagemap a:hover + div { visibility: visible; } Der Code muss valide sein, daher möglichst keine Javascript-Lösungen.. bzw nur welche, die valide sind. Würde mich über jede Hilfe freuen! Lg cheasy |
Sponsored Links |
|
|||
Apropos valide -> 64 Fehler sind keine gute Basis.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Zitat:
Aber danke für die äußerst hilfreiche Antwort.. |
|
|||
Dann zeige bitte eine Seite wo das Problem auftritt und die valide ist.
Bis jetzt hast du nur die im ersten Beitrag(das ist wohl die Jobseite) als Link zur Verfügung gestellt. - Und dort sind gravierende Fehler drin. Allein anhand deines geposteten Codes ist keine Hilfe möglich.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
||||
Zitat:
Solange der HTML-Code valide ist, ist es egal wie viel JavaScript du nutzt.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
Hier die valide Version: http://alnew.activegerman.org/top/jobs/
(bis auf den einzigen Fehler, dass img-Tags nicht geschlossen werden. Das wird noch vom CMS-PHP-Programmierer gelöst.) Hatte es eh auch mit Javascript versucht, aber das hat dann wiederum auch nicht in jedem Browser funktioniert .. bzw auf bestimmten PC's nicht - darum hab ich das jetzt mit CSS versucht. Ich würde doch gern einfach nur wissen, was der Internet Explorer für ein Problem mit dem Code hat und wie man das lösen kann. |
|
|||
Auf dem Link liegt ein Passwortschutz.
Die leeren Links brauchen einen Hintergrund, der nicht "transparent" ist. ab IE9 reicht rgba(0,0,0,0), für die älteren ein Bild angeben (das Bild muss nicht einmal existieren). Wobei ich nicht testen konnte, was im IE7 passiert. Der stürzt gleich ab, wenn ich die Seite aufrufen will. Eine CSS-Dynamik, die rein auf :hover basiert, funktioniert auch nicht auf "allen PCs". Tastatur-Navigation? Touch-Bedienung? Screenreader? Eine Umsetzung mit JS nach dem Prinzip des progressive enhancement wäre wohl das sinnvollste. Am Anfang müsste sinnvolles Markup stehen, z.B. in Form einer Liste; jeder Punkt besteht aus Überschrift und Textbereich (die Überschriften fehlen bei dir ganz, da deren Inhalt nur im Bild ist). Dann eine hübsche Formatierung ohne Dynamik, für die JS-freien Besucher. Und dann erst die Dynamik dazu per JS.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
Vorübergehend lass ich auf der alten Webseite mal die CSS-Dynamik - Die Idee mit Javascript klingt aber auf jeden Fall interessant, werde ich bei Gelegenheit mal für die neue Webseite ausprobieren, danke dir. |
Stichwörter |
css, div, hover, link |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS Menü Probleme beim IE7 | mainzer76 | CSS | 3 | 16.05.2012 13:37 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
bei kleinerer auflösung wird div container nicht ganz angezeigt | koehle | CSS | 12 | 17.07.2010 21:30 |
IMG erbt von div td a:hover? | docki | CSS | 8 | 21.01.2009 23:39 |
a:hover im div positionieren | abef17 | CSS | 7 | 20.09.2005 21:30 |