Hover on multiple SVG paths to show/hide divs

Question

Okay, so I'll try to be as clear as possible, and I'm sorry if this question, or something similar has been asked before, I've had a look and can't find an answer to this question.

I have created a map using SVG and have it loading in my HTML web page. The map is displaying perfectly and I am very happy with that aspect.

The page also has a number of hidden div's that show information on each area of the map.

The idea is that when a user hovers over a section on the map information displays in a neighbouring div with information on that area.

I am using mouseover and mouseout events, but am finding if the user skims their mouse over the map the divs display, but then don't hide again leaving a bunch of random divs active on the page.

My jQuery code looks like this:

$(document).ready(function(){
    $townOneText = $('#town-one-info');
    $infoText = $('#map-instructions');
    $('body').on('mouseover', '#town-one', function () {
        $infoText.hide();
        $townOneText.fadeIn("slow");
    });

    $('body').on('mouseout', '#town-one', function () {
        $townOneText.hide();
        $infoText.fadeIn("slow");
});

    $('body').on('click', '#town-one', function () {
        window.open('http://www.townone.com.au');
    });
});

Because I am tired and brain dead, I'm just going to link to the live page: http://www.rdaorana.org.au/_content/Orana.htm

I warn you I am not great with jQuery, but would appreciate any help.

I would also love to achieve this in as efficient code as possible (I apologise at the moment I've done the above for every area).

Thanks in advance for any help you may be able to provide.

Answer 1

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.

Answer 2

I think it's due to the fact that the animation(s) haven't finished executing yet. I.e. the fadeIn of the previous element on mouseover before you try to hide it and therefore you wont be getting the desired effect. Try adding in the jQuery stop() method before you hide.

Answer 3

I would add a class, e.g. section, to all map sections. Also, they should have a unique id (which I saw they already have).

I would then also add a class, e.g. info, to all info-boxes that you want to fade in through the mouseover. These should also get an id that corresponds to the section id, e.g. section-name-info.

You can then try the following:

$(document).ready( function () {
    $('.section').mouseenter( function () {
        $('.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(); 

        });

    $('.section').mouseleave( function () {
        $('.info').hide(); // hide all the info boxes again
        $('#map-instructions').show()
    });
});