jQuery Problem - addClass

[Sorrow1994]

Guten Abend zusammen,
ich habe folgendes Problem :

Ich füge folgenden Elementen per jQuery die class "controla" dem Ausgangelement hinzu

Ausgangselement :

#controls ul li {
    width:20px;
    height:21px;
    line-height:21px;
    text-align:center;
    font-size:10px;
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    cursor:pointer;
    background-position:top;
    background:url(../images/special-control.png);
    margin-bottom:6px;
}

class .controla

.controla {
    background-position:bottom;
}

Das jQuery Script

$(document).ready(function(){
    $(".slide:first").show();
    $("#controls ul li:first").addClass('controla');
    $("#controls ul li").click(function() {
        $("#controls ul li").removeClass('controla');
        $(this).addClass('controla');
        var control_pos = $(this).index() ;
        $(".slide").hide();
        $(".slide:eq("+control_pos+")").fadeIn(200);    
    });    
});

Das ganze ist online zu sehen :

Nur mein Problem ist halt, dass das entsprechende #control ul li Element die class nicht übernimmt ... Woran könnte das liegen ? Hoffe man erkennt, was ich meine

Bin für jede erdenkliche Hilfe dankbar!

mfg

 

[Duddle]

AW: jQuery Problem - addClass

Die Klasse wird laut Firebug übernommen, also liegt das Problem im CSS.

Lies dir mal http://htmlhelp.com/reference/css/structure.html#cascade durch, besonders Punkt 3. in "Cascading Order". Nach den dort gezeigten Regeln ist

#controls ul li {
}

wichtiger / höherrangiger als

.controla {
}

Ergo überschreibt ersteres deine Klasse. Ein möglicher Fix ist, die Klasse noch höher zu spezifizieren als das andere:

#controls ul li.controla {
}

Dann wirkt sie stärker als das andere.


Duddle

 

[Sorrow1994]

AW: jQuery Problem - addClass

Danke für deine Antwort

Nun geht alles