Big props to @creimers as without your code I would not have gotten to the answer! The code you gave me was so very close, but for some reason when calling on the SVG paths you need to call body first.
$(document).ready(function(){
$('body').on('mouseenter', '.map-region', function(){
$('.map-region').stop();
$('.map-info').hide(); // first hide all the info boxes
$('#map-instructions').hide();
var toShow = $(this).attr('id'); // get the hovered section's id
// show only this one info box that belongs to the hovered section
$('#' + toShow + '-info').show();
});
$('body').on('mouseleave', '.map-region', function(){
$('.map-region').stop();
$('.map-info').hide(); // hide all the info boxes again
$('#map-instructions').show();
});
});
I've also added in the jquery stop function, but it still seems to work fine without it. It's just there as a fail safe.
@Rob, you were right it was because I was fading the divs in. I don't think this looks as pretty, but am happy that it works properly.
Thanks to both of you, your help has been amazing.