"h2 ul.Menue li:hover > h1" klappt nicht

[Enrico]

Hallo,

ich versuche gerade, mein Drop-Down-Menü von unnötigem Javascript-Code zu "befreien" und rein über CSS zu realisieren.

Javascript war bisher notwendig, um meinem übergeordneten Menüpunkten eine andere Klasse zuzuweisen, sobald ich mich
über einem Menüpunkt aus einem Untermenü befunden habe.

Ich habe im Internet etwas sehr interessantes gefunden, konnte es aber leider bislang nicht auf mein Menü umsetzen:

http://jeremyjarratt.com/2008/09/16/css-tricks-styling-parent-elements-with-hover/
   http://jeremyjarratt.com/wp-content/uploads/2008/09/parent-highlighting-with-hover.html (Demo)

Dies entspricht genau meinem Vorhaben:

-Ich habe eine Grafik als Oberpunkt
   -Bei MouseOver ändert sich die Grafik (realisiert über "hover")
   -Bei MouseOver über einem Unterpunkt soll die Grafik des Oberpunktes wie bei MouseOver bleiben und  nicht wieder auf
    ihren Ursprungszustand zurückgesetzt werden ("hover" ist ja aufgehoben, da ich mich nicht mehr über der Grafik befinde)

Und hier hänge ich...

<h1 class="Auswahlliste_Anfangsbuchstabe"></h1>
   <h2 class="Auswahlliste_Anfangsbuchstabe_Optionen">
      <ul class="Menue">
         <li>aaaaaa</li>
         <li>bb</li>
         <li>cccc</li>
      </ul>
   </h2>

h1,
   h2,
   h3,
   h4,
   h5
   {
      padding:0px;
      margin:0px;
      width:auto;
   }

h1.Auswahlliste_Anfangsbuchstabe
   {
      background: url(../../GRAFIKEN/SCHALTFLAECHEN/Anfangsbuchstabe_0.png) no-repeat;
   }

h1.Auswahlliste_Anfangsbuchstabe:hover
   {
      background: url(../../GRAFIKEN/SCHALTFLAECHEN/Anfangsbuchstabe_1.png) no-repeat;
   }

h2 ul.Menue li:hover > h1
   {
      background: url(../../GRAFIKEN/SCHALTFLAECHEN/Anfangsbuchstabe_1.png) no-repeat;
   }

Wisst ihr Rat, warum das nicht funktioniert?

Ich habe es auch schon mit dem "div"-Tag probiert, klappt aber leider ebensowenig.

Vielen Dank und Gruß
Enrico

[Cheatah]

Hi,

Wisst ihr Rat, warum das nicht funktioniert?

wie sollten wir, wenn Du uns nicht mal erklärst, was "funktioniert nicht" bedeutet?

Cheatah

[Enrico]

Hallo Cheatah,

Ups, entschuldige... ;-)

Die Grafik von "h1" wird bei MouseOver über einem Listenelement aus "h2" nicht geändert,
ich will in diesem Fall in "h1" die gleiche Grafik angezeigt haben wie bei MouseOver über
dieser Grafik (h1).

Ich hoffe, das war verständlich...

Gruß
Enrico

[Cheatah]

Hi,

Die Grafik von "h1" wird bei MouseOver über einem Listenelement aus "h2" nicht geändert,

wie sollte sie auch? Vom <h2> aus hast Du keine Chance, das <h1> zu selektieren. Höchstens kannst Du den Selektor bei einem gemeinsamen übergeordneten Container ansetzen - ich schlage ein <a> vor, der Code ist eh schon zu 100% invalide.

ich will in diesem Fall in "h1" die gleiche Grafik angezeigt haben wie bei MouseOver über
dieser Grafik (h1).

Wenn wir schon bei Validität sind, kommen wir auch gleich zur Semantik: Das <h1> hat keinen Inhalt, ist also offensichtlich fehl am Platz. Entferne es.

Cheatah

[Enrico]

Hallo Cheatah,

so, jetzt habe ich (hoffentlich) einen wesentlich besseren Ansatz für mein Drop-Down-Menü,
allerdings ist es noch nicht ganz perfekt.

Mein Problem ist noch, dass sich die Hintergrundfarbe der Unterpunkte beo MouseOut und auch
bei MouseOver nur über die Länge des jeweiligen Links erstrecken, aber nicht über die Länge
des längsten Links des jeweiligen Untermenüs.

Schwierig zu beschreiben, deshalb nachfolgend eine Skizze, auch weil ich keinen Online-Link
anbieten kann, der mein Problem veranschaulichen könnte:

Ausgangszustand:

+----------------+-----+---+
   |Anfangsbuchstabe|Genre|FSK|
   +----------------+-----+---+

Aktueller Stand bei Mouseover:

+----------------+-----+---+
   |Anfangsbuchstabe|Genre|FSK|
   +----------------+-----+---+
                    |Action|
                    |Drama|
                    |Horror/Thriller|

Beabsichtigte Ausgabe bei Mouseover:

+----------------+-----+---+
   |Anfangsbuchstabe|Genre|FSK|
   +----------------+-----+---+-----+
                    |Action         |
                    |Drama          |
                    |Horror/Thriller|
                    +---------------+

Hier der zugehörige HTML-Code:

<ul id="menubar">
      <li><a class="Auswahlliste" href="#">Anfangsbuchstabe</a>
         <ul>
            <li><a href="#">C</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
            <li><a href="#">H</a></li>
         </ul>
      </li>
      <li><a class="Auswahlliste" href="#">Genre</a>
         <ul>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action/Drama</a></li>
            <li><a href="#">Horror</a></li>
         </ul>
      </li>
      <li><a class="Auswahlliste" href="#">FSK</a>
         <ul>
            <li><a href="#">0</a></li>
            <li><a href="#">16</a></li>
            <li><a href="#">18</a></li>
         </ul>
      </li>
   </ul>

Hier der zugehörige CSS-Code:

#menubar,
   #menubar ul
   {
      list-style: none;
      margin: 0;
      padding: 0;
   }

#menubar a
   {
      background:#5d7ac5;
      color:#b2b2b2;
      display: block;
      padding: 3px;
      text-decoration: none;
   }

#menubar a.Auswahlliste
   {
      padding: 3px;
      white-space: nowrap;
   }

#menubar li
   {
      float: left;
      width:auto;
   }

#menubar li
   {
      position: relative;
   }

#menubar li ul,
   #menubar ul li
   {
      clear:both;
   }

#menubar ul li a
   {
      color: #565656;
      border-right: 0;
      padding: 3px;
   }

#menubar li ul
   {
      display: none;
      position: absolute;
   }

#menubar li:hover a,
   #menubar a:focus,
   #menubar a:active
   {
      background:#b0c6ff;
      color:#000000;
   }

#menubar li:hover ul
   {
      display: block;
   }

#menubar li:hover ul a
   {
      background:#5d7ac5;
      color:#b2b2b2;
   }

#menubar ul a:hover
   {
      background:#b0c6ff !important;
      color:#000000 !important;
   }

"Erschwerend" kommt hinzu, dass ich den <li>-Elementen keine feste Breite zuweisen kann, weil
sie in ihrer Breite variieren.

Ich hoffe, Du (ihr) könnt mir jetzt besser weiterhelfen als bei meinem verkorksten letzten Ansatz.

Vielen Dank.

Gruß
Enrico

[Enrico]

Guten Morgen,

durch folgende Ergänzung habe ich es zumindest schon mal geschafft, dass
sich der Hintergrund der Untermenüs über die komplette Breite des Untermenüs
erstreckt, in Abhängigkeit des längsten Unterpunktes:

#menubar li ul
   {
      display: none;
      position: absolute;
      background:#5d7ac5; <--- Ergänzung
   }

Ich benötige jetzt noch eure Mithilfe, wie ich es schaffe, dass sich die
MouseOver-Markierung auch ebenso verhält.

Desweiteren wäre ich euch sehr dankbar, wenn ihr mir die für die Funktionalität
unnötigen Anweisungen mitteilen könntet, damit der Code schlanker wird.

Gruß
Enrico

[Paul]

Hi,

http://jeremyjarratt.com/2008/09/16/css-tricks-styling-parent-elements-with-hover/
   http://jeremyjarratt.com/wp-content/uploads/2008/09/parent-highlighting-with-hover.html (Demo)

Dies entspricht genau meinem Vorhaben:

Also ist dein Vorhaben den IE6 auszusperren? Weil bei dem klappts nicht.

Paul

[Ingo Turski]

Hi,

Und hier hänge ich...

<h1 class="Auswahlliste_Anfangsbuchstabe"></h1>

das ist ziemlich unsinnig. Warum kein <img> einbinden?

<h2 class="Auswahlliste_Anfangsbuchstabe_Optionen">
      <ul class="Menue">

und das ist noch übler, weil fehlerhaft.

Lass die Hx-Überschriften weg und nehme stattdessen eine verschachtelte Liste.

h2 ul.Menue li:hover > h1

Ist Dir klar, was Du da überhaupt selektierst?
eine h1, die direktes Kind einer li im Zustand hover ist, welche sich in der ul.Menue befindet, die wiederum ein Nachfahre von h2 sein soll. Weder kann eine ul innerhalb einer h2 stehen, noch ist die h1 ein Nachfolge dieser Elemente.

freundliche Grüße
Ingo