鼠标悬停时显示Floating Div

Question

我有一个简单的配置，我使用左侧面板，悬停占位符，当我悬停一个占位符（例如链接）我在右侧显示一个浮动div

一切正常，除了没有显示浮动div的Safari 。

在这里查看jsfiddle的源代码示例

我认为问题即将来临，因为我给＃左面板了

overflow: auto;

但当我删除此规则时，我再也看不到＃左侧面板中隐藏的内容

有人可以提出什么建议吗？

编辑

只需注意，它在大多数版本中运行良好：Firefox，Chrome，Opera，只在Safari中出现问题（7）

重要

即使我喜欢使用一些插件，出于性能问题，我仍然坚持使用纯JavaScript代码和CSS。 解决这个问题的任何css规则都是我想要的解决方案

一些截图 - 悬停后：

铬

火狐

歌剧

苹果浏览器

Answer 1

我会把它放在评论中，但它不会让我添加评论。 尝试使用绝对定位并将块完全放在窗外; 当用户将鼠标悬停在上面时，将该块放置在页面上您想要的位置。 您可以使用CSS。

以下是w3.org上的一个页面，其中显示了如何为可访问性问题执行此操作： http ： //www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G201 。

Answer 2

设置position:fixed到position:asbolute ＃left-panel的position:asbolute为我解决了问题。 是否有必要有固定的位置？