1

我想在具有以下约束的网页中使用工具提示：

  • 工具提示应该适用于简单的文本，而不仅仅是锚点。
  • 我不想使用 javascript，只有 css。
  • 我想让它至少在 Firefox 和 Internet Explorer 中工作。

一个有希望的候选者是 Eric Meyer 的解决方案，但它使用了锚点。Loadaveragezero 的解决方案对简单文本使用 span，但它在 Internet Explorer 中不起作用。

我正在寻找一个工作代码示例或具有上述参数的解决方案的链接。

4

3 回答 3

5

满足您所有要求的解决方案是不可能的。IE 的尊重:hover是有限的——Eric Meyer 的解决方案在 IE 中有效，因为它使用了锚点。如果你想让它在任何元素上工作并在 IE 中工作，你必须使用 JS。

于 2009-02-17T15:58:54.847 回答
4

正如其他人所说，您的要求是不切实际的。在可能禁用 Javascript 的环境中，我通常会使用该title属性来获取简单的浏览器工具提示作为后备，然后通过 Javascript 读取标题属性启用更好看的工具提示（使用诸如 jQuery 之类的框架，或者根据我的个人喜好 Mootools） .

代码示例可能类似于（使用Mootools和Tips插件）：

<script type="text/javascript">
window.addEvent('domready', function() {
    // Enable the most basic default tooltips
    var tooltips = new Tips('.tips');
}
</script>

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p>
于 2009-02-17T16:37:16.517 回答
1

恐怕它不能在你的限制范围内工作。Internet Explorer 6 和更早版本仅检测悬停在锚点上，因此您需要放弃使其工作的要求，或者：

  • 只需要在 IE7 和更新版本中工作（在这种情况下 Loadaveragezero 的解决方案可以工作）
  • 可以使用锚点（在这种情况下，Eric 的解决方案会起作用）
  • 可以使用 Javascript（在这种情况下，有很多 方法可以让鼠标悬停在 IE7 之前）
于 2009-02-17T15:59:35.047 回答