✔ Kindselektor?

[Alice]

Hallo.

Ich möchte, wenn man mit der Maus über ein DIV "fährt", ein anderes Element (UL) einblenden. Das Problem ist, dass ich möglichst auf "class" und "id" verzichte und viel mit Kindselektoren arbeite.

Könnte man mit JS so etwas "ansprechen"?

.ForumsL2A1 > li > div > div > div

Wenn über dieses Element "gefahren" wird, soll etwas anderes eingeblendet werden.

.ForumsL2A1 > li > div > div > div > div:nth-child(3) > ul

Mit CSS habe ich es nicht hinbekommen...

.ForumsL2A1 > li > div > div > div:hover + .ForumsL2A1 > li > div > div > div > div:nth-child(3) > ul
{
   opacity: 1;
}

 

[SpiceLab]

Mit CSS habe ich es nicht hinbekommen...

.ForumsL2A1 > li > div > div > div:hover + .ForumsL2A1 > li > div > div > div > div:nth-child(3) > ul
{
   opacity: 1;
}

Grundsätzlich ist dein Vorhaben mit CSS lösbar - siehe mein abgespecktes Demo mit den drei Kriterien ">", "+" u. ":nth-child()": http://jsfiddle.net/spicelab/s5xvamdL/

Offensichtlich stimmt deine Selektoren-Abfolge mit dem HTML-Gerüst nicht überein.

 

[Alice]

Ich habe es nun hoch und runter ausprobiert, aber es funktioniert nicht.

.ForumL2A1 > li > div > div:not(:first-child) > div:hover + div:nth-child(3) > ul {
opacity : 1;
background-color : #FF0000;
}

Ich bin mir sicher, dass es nicht an der HTML-Struktur liegt.

Edit:

Hab die Struktur (1:1) und das CSS als Demo geschaltet.

http://jsfiddle.net/uqb1g3kc/1/

 

[Alice]

Hier ein besseres Beispiel: http://jsfiddle.net/uqb1g3kc/3/

 

[SpiceLab]

Analog zu

.ForumL2A1 > li > div > div:not(:first-child) > div > div:nth-child(3) > ul
{
   list-style: none;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   opacity: 0;
}

muß es statt

.ForumL2A1 > li > div > div:not(:first-child) > div:hover + div:nth-child(3) > ul
{
   opacity: 1;
   background-color: #FF0000;
}

so lauten

.ForumL2A1 > li > div > div:not(:first-child) > div:hover > div:nth-child(3) > ul
{
   opacity: 1;
   background-color: #FF0000;
}

http://jsfiddle.net/uqb1g3kc/5/

Ich bin mir sicher, dass es nicht an der HTML-Struktur liegt.

Ergo lag es sehr wohl an der HTML-Struktur, da es sich bei dem dritten Kindelement nicht um ein benachbartes Element handelt.

 

[Alice]

Funktionert Perfekt! Danke!

Jetzt wo Du die HTML- und CSS-Struktur kennst... Wie findest Du es vom Aufbau? Ziel ist HTML5, CSS3, Moderner/Schlanker Sourcecode und natürlich Seo. Es werden noch HTML5-Elemente eingebaut.

 

[SpiceLab]

Schlanker Code sieht definitiv anders aus

Mir hat sich schon heute Morgen nicht erschlossen, warum der HTML-Code mit so vielen <div>-Elementen verschachtelt ist? Auf den ersten Blick erscheint mir der überwiegende Teil semantisch überflüssig.

Nur ein Beispiel daraus:

<ol class="ForumL2A1">
  <li>
    <div>
      <div>
        <h2>Foren-Kategorie</h2>
      </div>
      ...

Warum stattdessen nicht einfach so?

<ol class="ForumL2A1">
  <li>
     <h2>Foren-Kategorie</h2>
      ...

Der Begriff "DIV-Suppe" ist dir nicht geläufig?

 

[Alice]

Meinst Du?

Ich wollte etwas flexibler sein in der Gestaltung und für die "Final-Version".

Der Begriff "DIV-Suppe" ist dir nicht geläufig?

Hast Du mal das Original von vBulletin gesehen? Das ist wirklich eine Suppe... Auch XenForo ist in dieser Hinsicht nicht wirklich schlank.

 

[Jan-Frederik Stieler]

HI,

uf den ersten Blick erscheint mir der überwiegende Teil semantisch überflüssig

Divs sind semantisch immer überflüssig , auch wenn man versucht diesen per IDs eine semantische Bedeutung zu geben.

Grüße

 

[Alice]

Ich bin für alles offen. Vorschläge?