Question

好的，所以我会尽量保持清醒，我很抱歉，如果这个问题或类似问题之前已被问过，我已经看过了，但是找不到这个问题的答案

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

该页面还有一些隐藏的div，用于显示地图每个区域的信息。

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

我正在使用鼠标悬停和鼠标输出事件，但我发现用户是否将鼠标滑过地图显示div，但是不要再隐藏，在页面上留下一堆随机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');
    });
});

因为我累了，脑子已经死了，我只想链接到实况页面：http://www.rdaorana.org.au/_content/Orana.htm

我警告你，我对jQuery不太满意，但我会感激任何帮助。

我也希望以尽可能高效的代码实现这一目标（我在为每个领域完成上述工作时道歉）。

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

Answer 1

我认为这是因为动画还没有完成执行。即在尝试fadeIn之前，mouseover上的前一个元素的hide，因此您无法获得所需的效果。尝试在stop()之前添加jQuery hide方法。

Answer 2

我会添加一个类，例如section，覆盖所有地图部分。此外，他们应该有一个唯一的ID（我看到他们已经拥有）。

然后我还会添加一个类，例如info，对于您希望通过鼠标悬停淡入的所有信息框。这些也应该获得与部分ID相对应的id，例如section-name-info。

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

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

Answer 3

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

我还在jquery stop函数中添加了它，但没有它它似乎仍然正常工作。它只是作为一个失败保险箱。

@Rob，你是对的，因为我正在淡化div。我不认为这看起来很漂亮，但我很高兴它运作正常。

感谢你们两位，你的帮助非常棒。

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

3 个答案: