Jquery CSS帮助：图像映射和密度

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

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

总之，这段代码使用HTML、CSS、MySQL、PHP和jQuery。有关此代码的示例，请参见此处：

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

---

我看了一下这个网站，想知道什么是什么，小提琴没有额外的覆盖层

希望它不会违背我的建议 你可以看看这里的小提琴：

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

HTML:

所有这些都是在类可以悬停的每个元素上连接鼠标和鼠标，然后允许它隐藏其他标记，并在需要时重新显示它们

更新：修复了在mouseout上隐藏段的代码

---

希望这有帮助

你的想法是一个好主意，它是有效的，但现在我有一个问题，鼠标悬停信息不会消失。一旦你在它上面盘旋一次，它就会停留在那里。我想这可能与我的CSS有关。你能提供一个更新的提琴，让我可以测试我的代码吗。我知道发生了什么，但需要测试才能确定。试试这把小提琴

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

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