✔ DIV mittels eines anderen, gehoverten DIVs einblenden

[Bomber]

Hallo,

ich habe versucht mal wieder eine Website zu machen und scheitere momentan an einer Einblendung eines DIV beim hovern eines anderes DIVs. Beim Firefox, Safari & Chrome funktioniert es, bei IE nicht. Habe schon mehrere Möglichkeiten von Kinder, Nachbar etc-Selektoren ausprobiert, nichts funktioniert. evtl liegt der Fehler ganz woanders. Wäre toll, wenn jemand sich die Zeit nehmen würde mal drüber zu schauen, Danke!


Hier die Site als WIP

Einblenden des DIV per CSS:

div#menu_praxis_dropdown{
			display:none;
			position:absolute;
			bottom:18px;
			left:156px;
			height:60px;
			width:150px;
			text-align:left;
			padding:5px;
			background-color:white;
			font-size:14px;
			opacity:0.65;
			filter:alpha(opacity=65);
		}
div:hover#menu_praxis div#menu_praxis_dropdown{
			display:block;
		}

<div id="menu_praxis">Die Praxis
     <div id="menu_praxis_dropdown">
			<a href="gallery.htm"><img src="images/menu_dropdown_rundgang.png" height="23" width="123" alt="Rundgang"></a>
			<a href="contact.htm"><img src="images/menu_dropdown_kontaktdatenanfahrt.png" height="38" width="114" alt="Kontakt & Anfahrt"></a>
     </div>
</div>

 

[Slin61]

Der IE ist ziemlich schlecht. Der kennt den Hover-Befehl nicht. Das musst du über javascript machen...
Einfach bei deinem "menu_praxis_dropdown" onmouseover hinzufügen und dort die Klasse ansprechen und per DISPLAY: BLOCK, wird sie angezeigt. Hier also nochmal im Code:

<div id="menu_praxis" onmouseover="getElementById('menu_praxis_dropdown').style.display = 'inline';">
<div id="menu_praxis_dropdown">
			<a href="gallery.htm"><img src="images/menu_dropdown_rundgang.png" height="23" width="123" alt="Rundgang"></a>
			<a href="contact.htm"><img src="images/menu_dropdown_kontaktdatenanfahrt.png" height="38" width="114" alt="Kontakt & Anfahrt"></a>
     </div>

Vorher muss dein "menu_praxis_dropdown"-div nur noch per display: none; unsichtbar machen und du bist fertig. Wenn das Div wieder verschwinden soll nimm das hier:

onmouseout="getElementById('menu_praxis_dropdown').style.display = 'none';"

Und schon sollte es in allen Browsern funktionieren.(Zumindest bei meinem IE)

 

[Bomber]

Tatsächlich! Dankeschön!

Ich war bis gerade davon ausgegangen, dass zumindest der IE 9 die :hover Pseudoklasse kennen würde. Pustekuchen!

Aber ich hätte auch selbst drauf kommen müssen, weil sich der "Praxis" schriftzug beim Hovern auch nicht ändert.