【发布时间】：2013-12-09 18:05:11
【问题描述】：
我正在显示一个名为 #mastermap 的 <div>，其中包含多个插槽。
这些插槽由使用绝对定位和margin-top + margin-left 设置在特定坐标的图像表示。
每张图片后面都有一个<map> 和<area>，这使我可以将菱形插槽超链接到占位符 URL。
在我的地图下方是一个#tooltip-bar 部分，当没有悬停任何插槽时显示默认信息。
但是，当一个插槽悬停时，它自己的.tooltip 会显示在#tooltip-bar 部分上。
以下是问题：
如果我选择我的 .tooltip 和 #mastermap map:hover > .tooltip，使用 > 父子组合器，我的工具提示会在区域悬停时正确显示，但当鼠标离开该区域时它们不会消失.仅当我将鼠标悬停在代码中稍后出现的插槽上时，工具提示才会更改，但如果它更早出现，则不会更改。看来我必须离开整个#mastermap 区域才能“重置”悬停。
如果我选择将#mastermap area:hover ~ .tooltip { 与~ 或+ 同级组合器一起使用，工具提示会时断时续，这会取消之前的问题，但会引入另一个问题。
我已经在这里发布了完整的代码：http://cssdesk.com/qe4bh
我在 Firefox 上运行所有这些，尚未在任何其他浏览器上测试代码。
我认为使用 JavaScript 可能会解决我的问题，但我还没有将自己介绍给这种语言，目前理想情况下正在寻找 CSS/HTML 修复程序。
【问题讨论】：
标签： html css map hover css-position