我在一个网站上工作,该网站使用三个小图像作为 twitter、facebook 等的链接。我有一个标注图像,当我将鼠标悬停在图像上时我想显示它。
这里的关键是标注图像不会干扰页面上的其他图像和文本。
是否有一个方便的解决方案可以满足这种需求?
我在一个网站上工作,该网站使用三个小图像作为 twitter、facebook 等的链接。我有一个标注图像,当我将鼠标悬停在图像上时我想显示它。
这里的关键是标注图像不会干扰页面上的其他图像和文本。
是否有一个方便的解决方案可以满足这种需求?
不是积极的,但听起来你可以只分配背景图像并使用背景位置属性在悬停和非悬停状态下显示适当的图像
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/
你试过MooTools吗?他们有很多可能满足您要求的 Javascript 实用程序。
老派:
将图像合并为一个,然后使用带有 onmouseover 事件的客户端图像映射,使适当的 div 可见。
新学校:
使用 CSS 悬停伪类。这里的好例子:http ://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ (不适用于所有浏览器)