I've been grappling with this issue for the past couple of days and despite trying numerous solutions, nothing seems to be working.
My SVG map of the US has jQuery mouseenter and mouseleave events that function properly in browsers other than IE 11 (and potentially IE 9 & 10).
When hovering over a state's border, the fill color should change (works in FF) and a tooltip should appear (following the mouse cursor). While these features work fine in other browsers, IE completely disregards them. I even tested a mouseover event which worked, but the mouseenter and mouseleave events fail in IE. The click function, however, works correctly in IE.
You can view the page at . The JavaScript code is located at .
Here's an excerpt of the JS:
$('.state').mouseenter(function() {
if (!state_selected) {
$(this).css('fill', '#c8b33b');
}
if (strpos($(this).attr('id'), 'R_') === false) {
$('#state_label').text($(this).attr('alt')).show();
$(document).mousemove(function(e) {
$('#state_label').css({
left: e.pageX - 55,
top: e.pageY + 20
});
});
}
else if (state_selected) {
$('#state_label').text('').hide();
}
});
$('.state').mouseleave(function() {
if (!state_selected) {
$('#state_label').text('').css('display', 'none');
$(this).css('fill', '#001a8b');
}
});
Any assistance would be greatly valued as resolving this issue is crucial for a larger project on the site that involves a similar map. While the failure on this specific page may not be catastrophic, it is mission critical for the other project where it needs to function flawlessly.