CSS mit JS einer übergeordneten Liste ändern

[limubai81]

Hiho ich möchte gerne mit JS beim Hover über einen Unterpunkt in der Navi das CSS des übergeordneten Hauptpunktes ändern.

<div id="navigation">
<ul>
<li><a>Hauptpunkt</a>
     <ul>
      <li><a>Unterpunkt</a></li>
      <li><a>Unterpunkt</a></li>
      <li><a>Unterpunkt</a></li>
      <ul>
</li>
<li><a>Hauptpunkt</a></li>
<li><a>Hauptpunkt</a></li>
</ul>
</div>

function test() {
    $(" .navigation ul li ul li a").hover(function () {
        $(this).parent().parent().parent().css({ background-color: "#000" });
    });
        }

Leider komme ich hier gerade nicht mehr weiter. Bräuchte deswegen ein bisschen Hilfe, vielleicht lieg ich ja mit der Vorgehensweise auch total aufm Holzweg.

Beim Aufruf der Hoverfunktion gibts schon mal keinen Fehler, dies hab ich durch alert() überprüft.

lg limu

 

[Myhar]

AW: CSS mit JS einer übergeordneten Liste ändern

Das, was du möchtest, ist auch komplett ohne JS zu realisieren. Außer du möchtest je nach Unterpunkt eine andere Farbe beim übergeordneten Punkt verwenden. Davon rate ich jedoch aus Benutzersicht ab, es ist sinnvoller, dort etwas zu verändern, wo der User sich gerade befindet und nicht irgendwo anders. Das wird nämlich als störend empfunden.

Zu deinem Problem: Lass dir $(this) in der Konsole ausgeben. Ist es das a Element, dann ist deine parent-Struktur korrekt. Bzw, gibt es einen allgemeinen Fehler in der Fehlerkonsole?

 

[limubai81]

AW: CSS mit JS einer übergeordneten Liste ändern

Oh man hätte ich nur paar Minuten weiter Prof. Google befragt, hab den Fehler gefunden.

function test() {
    $(" .navigation ul li ul li a").hover(function () {
        $(this).parent().parent().parent().css([COLOR=Red][B]'background-color', 'red'[/B][/COLOR]);
    });
        }

edit: mit reinem CSS hatte ich es getestet, hatte es aber aufgrund der ich sag mal "schwierigen" vorgegeben Struktur nicht hinbekommen.