toggleClass() from jquery not working for a valid selection

Question

My hide class does not accept the toggleClass:

function overFx (element, classN) {

    if (!element.hasClass('ligado')){

        if (!$.browser.webkit && !$.browser.opera){
            //TR

            element.toggleClass(classN);

        } else {
            //TD

            element.children("td:not(.media)").toggleClass(classN);
        }
    }
}
//EFEITOS PARA DESTACAR LINHAS:

//MOUSE OVER:

$("tr.destacar:not(.hide)").mouseover(function (){

    overFx($(this), "mouseoverTr");
}
);

$(".hide").mouseover(function (){

    overFx($(this), "mouseoverTrHide");
}
);

//MOUSE OUT:

$("tr.destacar:not(.hide)").mouseout(function (){

    overFx($(this), "mouseoverTr");
}
);

$(".hide").mouseover(function (){

    overFx($(this), "mouseoverTrHide");
}
);

I'll post the Jsfiddle later.

The $("tr.destacar:not(.hide)") par is working perfectly, but the $(".hide") isn't , and it should be! they are there , I console.logged it , the $(this) returns exactly what I wanted.

Answer 1

You have a typo in your $(".hide").mouseout(...) method, you have .mouseover(...) instead.

To re-iterate, you have $(".hide").mouseover twice, where the second one should be a .mouseout instead.

Demo: http://jsfiddle.net/ducYE/