CSS 帮助：图像映射和密度

Question

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

有什么 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();
    });
});

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

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

希望对您有所帮助！

CSS 帮助：图像映射和密度

CSS Help: Image Map and Density

css

jquery

dictionary

image

jsfiddle