鼠标悬停显示浮动 DIV

Question

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

一切都运作得很好，除了Safari浏览器无法显示浮动div。

在这里可以看到源代码示例 jsfiddle

我发现问题的原因是因为我给了#left-panel一个

overflow: auto;

但是当我删除这个规则时，我就无法看到从#left-panel隐藏的内容了。

有人能建议些什么吗？

编辑

只是一个提示，它在大多数版本的Firefox、Chrome、Opera中都可以正常工作，问题只出现在Safari（7）中。

重要

即使我想使用一些插件，由于性能问题，我还是坚持使用纯JavaScript代码和CSS。任何解决这个问题的CSS规则都是我会使用的解决方案。

一些截图 - 鼠标悬停后：

Chrome

火狐浏览器

Opera

Safari

- Abu Romaïssae

---

为什么不使用工具提示呢？ :) - bipen

我展示的内容非常复杂，可能包含滑块和其他一些东西，我只是举个例子来解释我的问题。 - Abu Romaïssae

@AbuRomaïssae，有很多提示插件允许在提示中使用复杂的HTML结构。例如Qtip2。 - Rory McCrossan

在我的真实项目中，我甚至没有使用jQuery（只用原生JS编写）。嗯，你在你的FIDDLE中使用了jQuery，并在这个问题上打了jQuery标签，为什么会这样呢？ - bipen

你可以使用 CSS 来实现工具提示：http://jsfiddle.net/zuTDp/ - Stefan Dunn

Answer 1

为了解决问题，将 #left-panel 的 position:fixed 更改为 position:absolute。是否必须使用固定位置？

- Stefan Dunn

Answer 2

我会把这个放在评论里，但是它不让我添加评论。尝试使用绝对定位，并将块完全定位到窗口之外；当用户鼠标悬停时，将块定位到您希望它在页面上的位置。您可以使用CSS来实现此目的。

这是w3.org上的一个页面，展示了如何解决无障碍问题：http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G201。

- user2509848