nicht angemeldet
Hallo Forum :-)
Ich habe folgende skizzierte Ausgangssituation bei unserer geplanten Darthomepage:
|
| +-------------+ +-------------+ +--- ...
| | Versteckter | | Versteckter | |
| | div-Bereich | | div-Bereich | |
| | der zum 1. | | der zum 2. | |
| | Menüpunkt | | Menüpunkt | |
| | gehört | | gehört | |
| +-------------+ +-------------+ +--- ...
|
| [Menüpunkt 1] [Menüpunkt 2] [...
|
| [Menüpunkt 3] [Menüpunkt 4]
|
+-------------------------------------------
Zu allen weiteren Menüpunkten gibt es ebenfalls jeweils einen versteckten div-Bereich, diese habe ich aber - der Übersichtlichkeit halber - weggelassen, da sich die versteckten div-Bereiche teilweise überlagern.
Die einzelnen Menüpunkte bestehen aus Grafiklinks, die die MouseOut-/MouseOver- und Click-Grafiken enthalten, d.h. ich habe pro Grafiklink eine "große" Grafik mit allen Zuständen, nur wird über css der jeweils anzuzeigende Grafikausschnitt per background-position verschoben.
In den versteckten div-Bereichen sind Details zu den einzelnen Grafiklinks enthalten.
Ich habe sowohl den "Wechsel" der Zustände der Grafiklinks über css hinbekommen, als auch das gleichzeitige Anzeigen/Verbergen der versteckten div-Bereiche über javascript hinbekommen.
Allerdings möchte ich von javascript weggehen, da dies doch sehr oft oder/und immer öfter aus Sicherheitsgründen oder Durch-unsinnige-Skripte-nicht-mehr-belästigt-werden-wollen-Gründen ausgeschaltet.
Was ich erreichen möchte, ist, dass bei MouseOver über einen Grafiklink über css auch der zugehörige versteckte div-Bereich angezeigt wird, weiß aber nicht, ob und wie das genau funktionieren kann.
Ich meine, im Internet mal Konstrukte gefunden zu haben, die über die spitze Klammer rechts (">") miteinander verbunden (?) wurden, konnte aber aufgrund der Tatsache, dass ich nicht weiß, wie diese Technik heisst, auch nicht gewinnbringend danach googeln.
Auch weiß ich nicht, ob diese Technik, sollte es sie geben, valide ist und in jedem handsüblichen Browser auch reibungslos funktioniert.
Aber wenn ja, dann müsste es folgendermassen doch richtig sein, oder?
div.Container_Ankuendigungen_Klebezettel
{
position: absolute;
width: 125px;
height: 126px;
bottom: 65px;
left: 294px;
background: url("../Grafiken/Ankuendigungen_Klebezettel.png") 0px 0px no-repeat;
display: none;
}
div.Container_Link_Ankuendigungen a
{
height: 31px;
width: 128px;
display: block;
background: url("../Grafiken/Ankuendigungen_Link.png") 0px 0px no-repeat;
}
div.Container_Link_Ankuendigungen a:hover
{
background-position: 0px -31px;
}
div.Container_Link_Ankuendigungen a:hover > div.Container_Ankuendigungen_Klebezettel
{
display: block;
}
Ich hoffe, ihr könnt mir weiterhelfen.
Vielen Dank im Voraus.
Gruß
Enrico
Der Martin
MudGuard