Listenelemente bei Mausover fett darsstellen

[pepesan]

Hallo,

Ich habe eine Liste mit 3 Listenelemente. Den 1. habe ich per jquery eine Klasse "bold" zugewiesen.
Wenn diese Liste erschein soll der 1. Punkt fett sein. -> das Funktioniet soweit.
Wenn ich aber mit der Maus über die anderen beiden Listenelemente gehe sollen die fett werden, dazu habe ich im css einfach ein - .front li:hover{font-weight: bold;} - definiert.
Gleichzeitig soll aber der 1. Punkt "normal" werden. Dazu habe ich mir gedacht entferne ich einfach die Klasse "bold"
Irgendwie klappt das nicht.

Wichtig ist noch das wenn ich über den 1. Punkt gehe solange der fett ist soll nix passieren.
Was mache ich falsch ?
Hier der code:

div class="front">
                        <p><span>02</span> Profil</p>
                        <ul>
                        <li><a href="">Unternehmen & Kompetentenzen</a></li>
                        <li><a href="">Referenzen</a></li>
                        <li><a href="">Dreoege Immobilien Bewerten</a></li>
                        </ul>
                    </div>

jQuery(document).ready(function(){
    
    var front = jQuery('.front');
    front.find("li:first-child").addClass("bold");
    
    front.find("li").not('.bold').hover(function(){
        console.log( $(this) );
        jQuery(this).find(":first-child").removeClass("bold")},function(){
            
            jQuery(this).find("li:first-child").addClass("bold");
        }
    );

 

[Banana_Jones]

$(this) (Zeile 8) ist in diesem Fall nicht die Gruppe der <li>, sondern das gehoverte Element.

 

[pepesan]

Danke
und wie mach ich das jetzt?

 

[Cheffchen]

hallö,

in dem das elternelement suchst und dann kannst ja das erste li ansprechen.
.parent()

cheffchen