Question

我正在使用三个小图片作为Twitter，Facebook等链接的网站上工作。我有一个标注图像，当我将鼠标悬停在图像上时，我想显示该图像。

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

是否有满足这种需求的方便解决方案？

Answer 1

不是正面但听起来你可以只分配背景图像并使用background-position属性在悬停和非悬停状态下显示适当的图像

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按钮（非悬停和悬停）。

这是一个基本的例子http://www.dynamicsitesolutions.com/css/background-image-switching/

Answer 2

你试过MooTools吗？他们有很多可能符合您要求的Javascript实用程序。

Answer 3

旧skool：

将图像合并为一个，然后使用客户端图像映射与onmouseover事件，使相应的div可见。

新skool：

使用CSS hover psuedo类。这里的好例子是：http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/（不适用于所有浏览器）

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

3 个答案: