Css 寻找一个好的图像鼠标悬停解决方案

我在一个网站上工作，该网站使用三个小图像作为twitter、facebook等的链接。我有一个标注图像，我希望在鼠标悬停在图像上时显示该图像

这里的关键是标注图像不会干扰页面上的其他图像和文本

是否有一个方便的解决方案可以满足这一需求？

您尝试过吗？他们有很多Javascript实用程序可以满足您的需求。

旧skool:

将图像组合成一个，然后使用客户端imagemap和onmouseover事件，使适当的div可见

新skool：

---

使用CSS悬停psuedo类。这里有一个很好的例子：（不适用于所有浏览器）

不是肯定的，但听起来你可以只指定背景图像，并在悬停和非悬停状态下使用背景位置属性来显示适当的图像

a.twitter { display: block; width: 16px; height: 16px;
            background: url(/images/twitter-hover.png) no-repeat 0 0; }
a.twitter:hover { background-position: 0 16px }

假设一个16x32精灵由两个16x16按钮（非悬停和悬停）垂直堆叠而成

---

这是一个基本的示例

我认为任何主要的javascript框架都可能有满足其要求的实用方法……我已经看过jQuery，但我是开放的，我会看一看。谢谢。我已经考虑过了，但是这三张图片都很小（32 x 32），设计师的标注更大（50 x 150），并且会与其他内容重叠。谢谢你的反馈。丹，这件看起来可能有用。我试试看。谢谢