2 verschiedene Elemente gleichzeitg hovern

[wda]

hallo ihr lieben,

ich bin neu hier und hoffe zunächst, das ich mein Problem gut schildern kann, und eventuell jemand eine Lösung hat.

Es geht darum ich habe zwei "Menüs" - das eine befindet sich im Top Bereich der Website und das andere im Content Bereich. Beide sind umgeben von einem DIV das man zur Not auch gleich benennen kann.

Jetzt soll folgendes passieren: wenn ich oben im Menüpunkt "Link a" mit der Maus überfahre, soll der Hintergrund des <li> sich rot färben, die Schrift weiß - das allein ist machbar!
ABER es soll sich gleichzeitig im Content Bereich aus dem zweiten Menü ein Bild ändern was sich ebenfalls in einem <li> befindet.

Leider ist noch nichts online, sodass ich euch einen Link posten kann, daher nur eine Grafik die verdeutlichen soll, was passieren soll. Ich hoffe auf den ein oder anderen Tipp - da so langsam aber sicher der Baum vorm Kopf wächst und wächst.

Danke vielmals!
Jessy

[djheke]

Also, dass was du möchtest geht nur mit Java Script. Denn eine verschachtelte Liste kommt ja so wohl nicht in Frage. Was bezwecken die li's im Inhaltsbereich ??

[wda]

Ich hab es befürchtet, das es nur mit javascript geht. da muss ich mich aber noch mit beschäftigen, da bin ich ehrlich gesagt nicht firm drin.

das ist ein zweites menü was mit dem top menü verbunden ist. und es soll eben beim mouseover oben im topmenü ersichtlich sein, das es zu diesem jeweiligen top menüpunkt (überschrift) gehört und beim klick soll naürlich zu der seite verlinkt werden. alles etwas kompliziert, aber so steht der wunsch im raum. im notfall wird natürlich eine alternative genutzt, wo die beiden menüs unabhängig voneinander sind, aber sofern es machbar ist, und das scheint ja wahrscheinlich mit javascript der fall zu sein, werden wir wohl auf diese methode zurück greifen müssen.

[djheke]

Wenn ich dich richtig verstehe, dann dient das obere Menü nur als Überschrift und im zweitem menü wird erst verlinkt.

Wenn es so ist würde das auch mit einer verschachtelten Liste gehen. Allerdings wäre das Hovern wechselseitig.

[wda]

huhu,

nein... das ist ja das Problem.
Beide Menüs sind verlinkt. Der Link im Top Menü geht auf eine weitere Übersicht und die links im zweiten Menü sind auf Beispiele verlinkt.

Ich sag ja, etwas kompliziert - ABER irgendwie muss man das lösen!

[djheke]

Wenn du kein Java Script möchtest hier mal ein Beispiel mit CSS. Ist aber sensibel.

Code: Alles auswählen

* {
margin:0;
padding:0;
list-style:none;
text-decoration: none;
}

body {
width:900px;
margin:0 auto;
}


.navi ul {
float:left;
}

.navi li {
display:inline;
margin-left:1px;
}

.navi ul ul {
position:relative;
margin:20px 0;
}

.navi ul ul li {
display:block;
width:790px;
background:#aaa;
}

.navi a {
color:#FFF;
line-height:40px;
padding:20px;
background:#09c;
}

.navi ul ul li a {
color:#FFF;
line-height:40px;
padding:20px ;
background:transparent;
display:block;
}
.navi  li:hover li {
color:#fff;
background:#444;
}
.navi  a:hover {
color:#fff;
background:#444;
}


Code: Alles auswählen

   <div class="navi">
          <ul>
                <li><a href="#">&Uuml;bersicht Thema 1 </a>
                 <ul>
                  <li><a href="#">Beispiel zum Thema 1 </a></li>
                 </ul>
                </li>
                <li><a href="#">&Uuml;bersicht Thema 2 </a>
                 <ul>
                  <li><a href="#">Beispiel zum Thema 2 </a></li>
                 </ul>
                </li>
                <li><a href="#">&Uuml;bersicht Thema 3 </a>
                 <ul>
                  <li><a href="#">Beispiel zum Thema 3 </a></li>
                 </ul>
                </li>
                <li><a href="#">&Uuml;bersicht Thema 4 </a>
                 <ul>
                  <li><a href="#">Beispiel zum Thema 4 </a></li>
                 </ul>
                </li>

             </ul>
   
          </div>



So siehts aus
http://www.gipspferd.de/forumhilfe/doppelhover/

[djheke]

Ich habe mal so aus Jux und Dollerei eine CSS Variante mit Doppelhover erstellt. Allerdings würde ich es niemandem empfehlen.
http://www.gipspferd.de/forumhilfe/doppelhovercss/

Die zweite Variante ist mit etwas Java Script realisiert und ist irgendwie einfacher.
http://www.gipspferd.de/forumhilfe/doppelhoverjs/

Vielleicht kannst du ja etwas davon gebrauchen.