Halten :hover-Effekt auf die Eltern, wenn sich die Maus über Kind

Habe ich ein neues problem mit meinem Menü.

Ich will, dass die Eltern hover-Effekt aktiv, wenn Maus über Kind.

Ich weiß, ich könnte vielleicht mit jQuery? aber ich möchte wirklich, halten Sie es in der CSS, wenn möglich.

Und ohne alle Elemente eindeutige id ' s...

http://forevertan.dk/_temp/eventfest/3/test3.htm

InformationsquelleAutor Christian Bekker | 2012-01-11
  1. 2

    Wenn Sie möchten, verwenden Sie ein CSS nur Weg, was ich sehr empfehlen Sie, Sie würde ändern Ihre markup ein wenig.
    Wenn Sie überprüfen :hover auf a's Eltern (die li) a immer noch auf :hover wenn Sie unten gehen in das Untermenü.
    Im Grunde genommen sind wir, dies zu tun:

    ul#nav li > a {
    /* all the normal state styling here */
}
ul#nav li:hover > a {
    /* hover state styling here */
}

    Erweitern wir die a auf die Abmessungen der li. Also die li scheint sich zu Verhalten wie die a. Der einzige Unterschied ist, dass die li ist die Muttergesellschaft der a und das Untermenü ul.

    JSFiddle hier.

    HTML-bleibt die gleiche:

    <ul id="nav">
    <li>
        <a href="#test">Test</a>
        <ul>
            <li>
                <a href="#test/sub">Sub</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#test">Test</a>
        <ul>
            <li>
                <a href="#test/sub">Sub</a>
            </li>
        </ul>
    </li>
</ul>

    CSS-änderungen:

    ul#nav > li {
    padding: 0;
    margin: 0;

    float: left;
    position: relative;
}
ul#nav li > a {
    height: 30px;
    min-width: 80px;
    padding: 0;
    margin: 0;
    border-right: 1px solid #CCC;
    border-left: 1px solid #CCC;

    display: block;

    background: #000;

    color: #FFF;
    text-align: center;
    line-height: 30px;
    white-space: nowrap;
}
ul#nav li:hover > a {
    background: #FFF;

    color: #000;
}
ul#nav > li ul {
    display: none;
    position: absolute;
}
ul#nav > li:hover ul {
    display: block;
}
ul#nav > li ul li {
    display: block;
}.
    • Nur tryed mit dem, was Sie gemacht.. kann wirklich zum laufen bekommen? Es wirkt ziemlich seltsam? Können Sie ein schnelles Beispiel arbeiten?
    • Hinzugefügt JSFiddel. jsfiddle.net/ns2Kd
    • ahhh ich sehe 🙂 danke!
    • Hab 1 problem wenn.. nicht scheinen, um Stil text in das Untermenü? Das Untermenü text müssen kleiner sein, und alles, was ich versuchte einfach nicht scheinen, um es zu berühren? Habe sogar versucht, eine Klasse an der Lis
    • ul#nav li > a beide Stile. Hauptmenü und Untermenü. Sie haben Sie zu ändern, die selctor dieser: ul#nav > li > a.
    • +1: kam von Google, und habe den Punkt aus Ihrer Lösung zu tun, was die wichtigsten Zweifel fragte. Danke!

    InformationsquelleAutor buschtoens
  2. 8

    Setzen die :hover-Selektor auf die li - element, anstatt der Anker

    #navMain li:hover > a{
    background-color: black;
}

    http://jsfiddle.net/293mV/

    • Das ist nicht ganz das, was er beschreibt. Dies ändert sich, das Kind, wenn die Eltern schwebte, nicht die andere Weise herum.
    • Ich werde nur hinzufügen, dass dies wahr ist, aber mit IE6 li:hover wird nicht funktionieren. Mit IE6 mit den pseudo-Selektor :hover ist nur gültig, auf eine a element
    • Die Anfrage ist halten die Eltern Effekt auch, wenn die Maus über das Kind. Durch das auslösen aus dem li statt dem a, der höchsten Ebene a angezeigt wird, im hover-Zustand, wenn der Mauszeiger über die top-level-link und, wenn es vorbei ist, jedem Kind-element. Das ist genau das, was verlangt wird.
    • Ah, ich bekomme es. Sorry.
    InformationsquelleAutor Paul Alexander
  3. 0

    Können Sie Effekt-Eltern-Elemente mit CSS; Sie müssen JavaScript verwendet. Wenn Sie nicht wie die IDs, die Sie verwenden können jQuery ist relativ Selektoren .parent(), .next() etc.

    • Könntest du ein Beispiel?
    InformationsquelleAutor Diodeus - James MacFarlane
Schreibe einen Kommentar