Hover in CSS

[WIK-Lars]

Hallo,

ich baue in eine schon bestehende Website eine Navigation ein. Die Navigation besteht aus einer verschachtelten Liste.
Nun möchte ich bestimmte Meünpunkte mit einem Mouseover-Effekt belegen, allerdings mit CSS, also a:hover. Im Code
liegen diese Punkte unter <table><tr><td><ul><li><ul><li>, dann folgt der <a>-Link, der den Hovereffekt bekommen soll.
Ich habe nun schon mit zig Konstellationen versucht im CSS-style-Code, die betreffenden Links zu erreichen. Es ist - mir
selbst unverständlicherweise - nicht gelungen.

Wie kann ich an die Links ran, dass ich sie mit dem Hovereffekt versehen kann?

P.S. Bitte keine Diskussion darüber, dass es sich um ein Tabellenlayout handelt. Ist mir schon klar, dass man das nicht mehr
macht. Ich bau da jetzt nur übergangsweise für jemanden ein Menü ein.

 

[Maik]

Hi,

basierend auf deinem Quellcodeauszug funktioniert das so:

ul li ul li a {color:red;}
ul li ul li a:hover {color:black;}

 

[Cherrywine]

Hej,

wenn dir das zu verwurschelt ist, kannst du den Links ja auch einfach eine Klasse zuweisen und sie auf diese Weise ansprechen.


Lieben Gruß
Cherrywine

 

[Gumbo]

Nur wenn eine eindeutige Identifizierung nicht möglich ist, würde ich eine Klasse dafür einrichten. Denn es gibt eine „Krankheit“ namens Klassitis und genau deswegen wurden und werden so viele unterschiedliche Selektoren eingeführt.

 

[WIK-Lars]

Hallo Zusammen,

ich hatte es u.a. auch schon so gemacht, wie Maik es vorschlug. Auch mit Klassen. Es hat aber nicht funktioniert.

Die Seite ist hier zu begutachten.

Bis hierher schon mal vielen Dank.

 

[Maik]

Hi,

dass mein Vorschlag bei dir nicht funktioniert, und all deine Versuche misslungen sind, liegt einfach an dem Umstand, dass du jeden einzelnen Link mit dem style-Attribut formatierst.

Stattdessen werden diese Formatierungen einmal global im zentralen Stylesheet festgelegt, und dann klappt's auch mit meinem Stylesheet:

ul li ul li a {
margin-left: -10px;
text-decoration: none;
color: #FFFFFF;
font-family: Arial;
font-size: 13px;
font-weight: 600;
}

ul li ul li a:hover {color:black;}

Zudem solltest du darauf achten, dass beim Verschachteln der Liste, das schliessende </li>-Tag nach der Subliste notiert wird:

<ul>
    <li>Unternehmen</li> <!-- falsch -->
         <ul>
              <li><a href="WES_mission_statement.html">Mission Statement</a></li>
              ...
         </ul>
    </li> <!-- gehört hierher -->
</ul>

denn ansonsten funktioniert das Stylesheet erneut nicht.