After Jquery addClass/removeClass no change?

Question

Here is a test: http://jsfiddle.net/7jceH/

I use a Link, that changes the class of a div from .testOn to .testOff ( works perfectly ) and a mouseover action should turn in testOn the font color to yellow ( works great, too ) and in testOff the font color to red. But it doesn't change with the click and after the class Change.

//Test Link to change classes 
$(".testLink").click(function (e) {
   $("#test").removeClass("testOn").addClass("testOff");
});

// MouseOver testOn turns Font Color to yellow
$( ".testOn" ).mouseover(function(){
   $("#test").css('color', '#ecbf5d');
}).mouseout(function(){
  $("#test").css('color', '#000');
});

//MouseOver testOff turns Font Color to red
$( ".testOff" ).mouseover(function(){
   $("#test").css('color', '#cd0000');
}).mouseout(function(){
   $("#test").css('color', '#000');
});

Answer 1

You will want to use jQuery on, like so:

$(document).on("mouseover", ".testOff",function(){
   $("#test").css('color', '#cd0000');
}).on("mouseout", ".testOff",function(){
   $("#test").css('color', '#000');
});

https://api.jquery.com/on/

Answer 2

Try this.

$(".testLink").click(function (e) {
     $("#test").removeAttr('style')
     $("#test").removeClass("testOn").addClass("testOff");
 });

Updated Fiddle