Byt class på ett a element inom ett div element

Hej!

Jag har ett problem. Jag har en div som heter "#project-button", inuti den finns en <a href=""></a>. A-elementet ärver ju sin class från den globala "a{}" som jag definierat egenskaperna för i CSS-filen.

Till problemet, jag vill att om man drar muspekaren över diven (#project-button) så ska a-elementet, som ligger i denna div, byta ut sin klass. Jag försöker göra detta via Jquery. Den koden ser ut så här:

// CHANGE CLASS ON HOVER
$("#project-button").mouseover(function(){
   $("#project-button a").removeClass().addClass(".project-button-link_hover");
}).mouseout(function(){
   $("#project-button a").removeClass().addClass("a");
});

Så vad jag vill göra är helt enkelt att så fort muspekaren kommer över diven "#project-button" så ska a-elementet ta bort sin klass och i stället lägga på klassen ".projectbutton-link_hover" (Som förövrigt bara innehåller en annan "color"). När man sedan tar bort muspekaren från musen ska a-elementet igen ärva egenskaperna från a-klassen.

Men detta fungerar inte på så vis att klassen aldrig byts ut, vad jag kan se. Troligtvis för att jag på något vis skriver fel sökvägar på elementen. Eller?

addClass vill ha en sträng på klassnamnet, inte en klass selector

ta bort "." i din sträng.

för just nu kommer a-elementen få:

<a href="#" class=".project-button-link_hover"></a>

men detta borde du kunna lösa utan jquery (om du inte skall ha stöd för äldre webbläsare som inte klarar av :hover på annat än på a-element).

Tack, känner mig som en nolla nu som försökt lösa problemet på alla möjliga vis utom detta. :) Tack tack

#project-button:hover a { /* din css, borde fungera i webbläsare IE7 och uppåt */}

annars kan du göra ett undantag för <ie7 så kan du göra att jquery pluginet körs specifikt för IE6 och bara ändra lite i din CSS:

#project-button:hover a, #project-button a.hover { /* din css, borde fungera i webbläsare IE7 och uppåt */}

och kör jquery koden:

// CHANGE CLASS ON HOVER
$("#project-button").hover(function(){
   $("a", this).toggleClass("hover");
});

borde nog räcka ;)

eller ännu bättre kanske:

// CHANGE CLASS ON HOVER
$("#project-button").hover(function(){
   $(this).toggleClass("hover");
});

med css:

#project-button:hover a, #project-button.hover a { /* din css, borde fungera i webbläsare IE7 och uppåt */}

för det är ju project-button som är hover ;)