I'm encountering an issue with syncing hover effects in two separate tables. Oddly, the first part of the function works fine on its own. However, when I add the second part, it breaks the first part without any errors.
I refrained from including it in the jsfiddle because the problem lies within the code itself, not its visual representation.
$(function(){
//first part
var trsCont = $('#conteudo table tr');
for (i = 0; i < trsCont.length; i++) {
trsCont.eq(i).hover(
function () {
$('#coluna_fixa table tr').eq(i-1).toggleClass("hovered");
}
);
}
//second part
var trsCol = $('#coluna_fixa table tr');
for (i = 0; i < trsCol.length; i++) {
trsCol.eq(i).hover(
function () {
$('#conteudo table tr').eq(i+1).toggleClass("hovered");
}
);
}
});
I am aware that I am making a mistake somewhere. Can anyone help me pinpoint it?
Thank you for reading up to this point.