The problem is that your $HTMLtargets and $SVGtargets variables are not what you want them to be inside your event handler callback because when the event fires (sometime later), your outer for loop has already finished and thus those two variables are on their ending value.
You will need a closure to capture those variables separately for each event handler. Here's one way to do that:
// create closure to freeze the target variables
(function(hTargets, sTargets) {
for(var i = 0; i < $allTargets.length; i++) {
$allTargets.get(i).addEventListener('mouseover', function(e) {
hTargets.css('color', '#990000');
sTargets.attr('fill', '#990000');
}, false);
}
})($HTMLtargets, $SVGtargets);
FYI, I changed the name of the variables inside the closure to make it more obvious what was happening. It is not required to change the name of the arguments to the immediately executing function expression as they will just override the previously defined ones, but I think it's clearer what is happening if you change the names.
