Question

我有一个简单的问题。对于一个网站，我想创建一个通过悬停链接显示的“信息注释”，就像facebook在将你知道的一些缩略图悬停时所做的那样？

这是我目前所拥有的东西，所以你可以看到我所遇到的错误：

alt text http://img641.imageshack.us/img641/1571/notes.gif 所以唯一的问题是：小的“信息备注”留在我的div的左边。目标是这个小笔记在右边的图标上显示得很好......：/

需要javascript才能执行此操作吗？或者我们可以只使用css（在这种情况下，我的代码有什么问题？：/）

有关信息，这里是html代码：

<a href="#" onmouseover="infohover('show', 'aaa');" onmouseout="infohover('hide', 'aaa');">
    <span class="infohover" id="aaa"><span class="infohover_in">J'aime !</span></span>
    <img src="<?php echo $basedir; ?>images/temp/heart.png" alt="" />
</a>

和css：

.infohover { display: none; position: relative; float: left; margin-top: -30px; margin-left: -4px; opacity: 0.9; background: url('<?php echo $basedir; ?>images/temp/infohover_arrow.gif') 8px 24px no-repeat; }
.infohover_in { display: block; padding: 6px; margin-bottom: 6px; background-color: #000000; color: #ffffff; border-radius: 3px; }

ps：不要注意“不完美的书面”代码，我会快速写下来进行测试，看看我能做到还是不做......以后会清理它： - ）

非常感谢您的帮助和想法！祝你有愉快的一天！

Answer 1

此处不需要JavaScript。

HTML

<a href="#" class="tooltip">Icon 1<span class="tooltip">Tooltip 1</span></a>
<a href="#" class="tooltip">Icon 2<span class="tooltip">Tooltip 2</span></a>
<a href="#" class="tooltip">Icon 3<span class="tooltip">Tooltip 3</span></a>

CSS

a.tooltip {
    text-decoration: none;
    position: relative;
}
a.tooltip .tooltip {
    position: absolute;
    top: -1.1em;
    left: 0;
    display: none;
    color: black;
    white-space: nowrap;
}
a.tooltip:hover .tooltip {
    display: block;
}

魔法在a.tooltip { position: relative; }。每当元素具有position: relative时，该元素中具有position: absolute的元素将相对于该父元素定位。这个加上一个:hover伪动作使你的问题很容易解决。

Live demo

Answer 2

查看可以执行此操作的YUI Container。请注意第三个示例，它将弹出对话框与页面上的元素对齐。

您还需要为容器制作自定义皮肤。 YUI有一篇文章讲述了如何。

也可以使用jquery。

你可以自己动手。但通常使用库更好/更快。

css在图标顶部定位信息注释

2 个答案: