04.11.2010, 16:39
|
|||
|
|||
Bedingungsproblem
Hi
ich suche nach einer ganz speziell formulierten Bedingung für ein <li>Element um ein Menü zu realisieren. Ich möchte gerne alle <li> ansprechen die in dem <ol> liegen in dem das erste <li> mit der Maus überfahren wird. Habe mir bisher das hier ausgedacht Code:
div.menu > ol > li:first-child:hover < ol > li thx4help mfg joni 
|
| Sponsored Links |
|
04.11.2010, 17:08
|
|||
|
|||
|
fast
 Code:
<ol><li> :firstchild :hover </li> <li> bla </li> <li> bla </li> <li> bla </li></ol> Wenn ich dann das erste überfahre sollen alle anderen sichtbar werden. aber eben nicht mit javascript sondern mit reinem css. sollte eigentlich gehen. mfg harmoniemand
|
|
04.11.2010, 17:13
|
|||
|
|||
|
Wenn Du "nur" ein Ausklappmenü mit CSS haben willst, kannst Du Dich von
Stu Nicholls | CSSplay | CSS only menus inspirieren lassen, ggfs. noch nach "son of suckerfish" googlen. Wenn Du willst, dass andere li dann gestylt werden, wenn das erste li gehovert wird, mußt Du anders vorgehen, in etwa so: Code:
ol li
{background-color: red;}
ol + li:hover /* nachbarselektor = erstes li nach öffnendem ol */
{background-color: blue;}
ol + li:hover + li ,
ol + li:hover + li + li,
ol + li:hover + li + li + li,
ol + li:hover + li + li + li + li
{background-color: pink;}
Edit: In deinem Fall ( deine Ergänzung) wäre aber vermutlich ein "normales" CSS-Klappmenü der bessere Weg, die Untermenüs wären semantisch korrekt angelegt und lägen nicht zu flach da- jedenfalls bei größeren Menüs sinnvoll.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
05.11.2010, 04:42
|
||||
|
||||
|
Zitat:
Der Ansatz per :first-child war schon richtig - wenn ausschließlich beim Hovern des ersten li etwas passieren und dies gleich für alle li gelten soll, wären die korrekten Selektoren: Code:
li:first-child:hover,
li:first-child:hover ~ li {
background: red;
}
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
05.11.2010, 09:21
|
|||
|
|||
|
danke sehr. genau das war der fehlende selektor.
mfg joni
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
