我正在显示一个名为#mastermap的<div>，它包含几个插槽。
这些槽由使用绝对定位和margin-top+margin-left设置在特定坐标处的图像表示。
每个图像后面都有一个<map>和<area>，这允许我将菱形槽超链接到占位符URL。
在我的地图下面是一个#tooltip-bar部分，它在没有悬停插槽时显示默认信息。
但是，当一个插槽悬停时，它自己的.tooltip会显示在#tooltip-bar部分上。
以下是问题：
如果我使用>父子组合子用#mastermap map:hover > .tooltip选择我的.tooltip，当区域悬停时，我的工具提示会正确显示，但当鼠标离开该区域时，它们不会消失。只有当我将鼠标悬停在代码稍后出现的插槽上时，工具提示才会更改，但如果它更早出现，则不会更改。似乎我必须离开整个#mastermap区域才能"重置"悬停。
如果我选择将#mastermap area:hover ~ .tooltip {与~或+同级组合子一起使用，则工具提示会打开和关闭，这取消了前面的问题，但引入了另一个问题。
我已经在这里发布了完整的代码：http://cssdesk.com/qe4bh
我在Firefox上运行所有这些，还没有在任何其他浏览器上测试过代码。
我想使用JavaScript可能会有解决我问题的方法，但我还没有向自己介绍这种语言，目前我正在寻找CSS/HTML修复方案。
我发现这个问题比我想象的要简单得多。
这只是一个定位问题，我的.tooltip使用了position:relative，这意味着它在map:hover上发生了位移。因此，map不再悬停，导致循环。
修复方法是简单地用position:absolute替换position:relative。
这里展示了这一点：http://cssdesk.com/SwGad