После Jquery addClass/removeClass без изменений?

Question

Вот тест: http://jsfiddle.net/7jceH/

Я использую ссылку, которая меняет класс div с.testOn на.testOff (работает отлично), и при наведении мыши в testOn цвет шрифта должен измениться на желтый (тоже отлично работает), а в testOff цвет шрифта - на красный. Но это не меняется с щелчком и после класса 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

Вы захотите использовать jQuery, вот так:

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

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

Answer 2

Попробуй это.

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

Обновленная скрипка