jquery - CSS 帮助 : Image Map and Density

Question

我有这个图像映射，它使用 CSS 实现在框中显示信息的悬停效果。基本上，您将鼠标悬停在其中一个 map 标记上，然后它会显示有关该 map 区域的信息。可以在下面的链接上查看。

http://phantasmia-online.com/world-map

在显示信息时，是否可以使用任何 CSS 技巧来屏蔽其他标记？

总而言之，这段代码使用了 HTML、CSS、MySQL、PHP 和 jQuery。有关此代码的示例，请查看此处:

`http://jsfiddle.net/s7cu4/4/`

Answer 1

我查看了该站点以了解什么是什么， fiddle 没有额外的覆盖层。

希望它不会违背我的建议您可以在这里查看 fiddle :Marker Show and Hide

但我可以稍微描述一下我的更改，我删除了一些您的 jquery 并简化了它，但我添加了一些额外的 HTML

HTML:

<!-- Additions: class "can-hover" -->
<!-- data tag to reference the id you want to show -->
<div id="apphelmet" class="can-hover" data-seg="helmet"></div>

JQuery:

$(document).ready(function () {
    $('.can-hover').on('mouseover', function(){
        //remove all can-hover
        $('.can-hover').css("display","none");

        $(this).css("display","block");
        $('#'+$(this).data("seg")).show();
    });

    $('.can-hover').on('mouseout', function(){
        //remove all can-hover
        $('.can-hover').css("display","block");
        $('#'+$(this).data("seg")).hide();
    });
});

所有这一切只是将鼠标悬停在每个元素上，鼠标移出类可以悬停，然后允许它隐藏其他标记并在需要时重新显示它们。

更新:修复了在鼠标移出时隐藏段的代码

希望这对您有所帮助!