关于javascript：将鼠标悬停在多个SVG路径上以显示/隐藏div


Hover on multiple SVG paths to show/hide divs

好的，我会尽量保持清楚，如果对此问题或之前曾提出过类似问题，我很抱歉，我看了一下，却找不到答案。

我已经使用SVG创建了地图，并将其加载到我的HTML网页中。地图显示完美，我对此感到非常满意。

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

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

我正在使用mouseover和mouseout事件，但是正在寻找用户是否将鼠标滑过地图上的divs显示，但随后不再隐藏，从而在页面上保持一堆随机divs。

我的jQuery代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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');
    });
});

因为我累了并且脑筋急转弯，所以我只想链接到实时页面：http://www.rdaorana.org.au/_content/Orana.htm

我警告您我对jQuery不太满意，但会有所帮助。

我也很想以尽可能高效的代码来实现这一目标(对于每个领域，我都在做上述工作，对此我深表歉意。)

预先感谢您可能提供的帮助。

我要添加一个类，例如section，用于所有地图部分。此外，它们应该具有唯一的ID(我已经看到了)。

然后我还要添加一个类，例如info，移至要通过鼠标悬停而淡入的所有信息框。这些还应获得与部分ID相对应的ID，例如section-name-info。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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()
    });
});
相关讨论

我认为这是由于动画尚未完成执行。 IE。 hide上的上一个元素的fadeIn，然后再尝试hide，因此您将无法获得所需的效果。尝试在hide之前添加jQuery stop()方法。

@creimers的强大道具，因为如果没有您的代码，我将无法找到答案！您提供给我的代码非常接近，但是由于某些原因，在调用SVG路径时，您需要首先调用主体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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();
    });
});

我还添加了jquery stop函数，但是如果没有它，它似乎仍然可以正常工作。它只是作为故障保护而存在。

@Rob，您是对的，是因为我正在使div逐渐褪色。我认为它看上去并不漂亮，但很高兴它可以正常工作。

感谢你们俩，您的帮助真是太棒了。