Javascript 将鼠标悬停在多个SVG路径上以显示/隐藏div

好的，我会尽量说清楚，很抱歉，如果以前有人问过这个问题，或者类似的问题，我已经看过了，但找不到这个问题的答案

我使用SVG创建了一个地图，并将其加载到我的HTML网页中。地图显示得很完美，我对这方面很满意

该页面还有许多隐藏的div，显示地图每个区域的信息

其思想是，当用户将鼠标悬停在地图上的某个区域上时，相邻的div中会显示该区域的信息

我使用的是mouseover和mouseout事件，但是我发现如果用户将鼠标滑过divs显示的地图，但是不再隐藏，在页面上留下一堆随机div

我的jQuery代码如下所示：

$(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');
    });
});

因为我累了，脑子都快死了，我只想链接到live页面：

我警告您，我对jQuery不太在行，但如果您能提供帮助，我将不胜感激

我也希望用尽可能高效的代码来实现这一点（很抱歉，我已经在每个领域完成了上述工作）

---

提前感谢您提供的任何帮助。

我认为这是因为动画尚未完成执行。也就是说，在您尝试

隐藏它之前，
鼠标上方的上一个元素的
fadeIn
，因此您将无法获得所需的效果。尝试在jQuery
stop（）
方法中添加，然后再
hide
我会向所有地图部分添加一个类，例如
部分。另外，他们应该有一个唯一的id（我看到他们已经有了）

然后，我还会将一个类（例如，
info
）添加到所有要通过鼠标悬停淡入的信息框中。它们还应获得与节id相对应的id，例如
节名信息

然后，您可以尝试以下操作：

$(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()
    });
});

@creimers的大道具，因为如果没有你的代码，我就不会得到答案！您给我的代码非常接近，但出于某种原因，在调用SVG路径时，您需要首先调用body

$(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();
    });
});

我还添加了jquerystop函数，但是没有它，它似乎仍然可以正常工作。它只是一个故障保险箱

@罗布，你说得对，那是因为我在淡入水中。我不认为这看起来很漂亮，但我很高兴它工作正常

多亏了你们两位，你们的帮助真是太棒了。
这看起来离我想做的事情太近了！它在页面上似乎不起作用：我还对您的代码做了一点编辑：在mouseenter行中，我将其更改为：“$（'.section'）.mousenter（function（）{”因为它抛出了一个错误。我最终到达了那里，非常感谢你的代码。我发布了一些代码，这些代码可以作为其他人的答案，但如果没有你的代码，我就无法到达那里。非常感谢你的帮助：）你是对的，我忘记了一个
function（）{}
在
鼠标指针内
。我已经更新了答案。