Question

在一个相当简单的网页中，当鼠标悬停在某些链接上时，会出现一些类似工具提示的文字。

从这里开始我正在使用的测试页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tooltip Test Page</title>
<style type="text/css">
html, body, form, table, tr, td, div, p, h1, h2, h3, h4, h5 {
 border:0;
 margin:0;
 padding:0;
}

body {
 margin:10px;
}

html, body, table {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}

h1 {
 font-weight:bold;
 font-size:16px;
}

table {border-collapse:collapse;}
td {padding:0 8px 0 0;}

a.tooltip {
 z-index:24;
 text-decoration:none;
 cursor:default;
 position:relative;
 color:#000;
 display:block;
 width:100px;
}
a.tooltip span {display:none;}
a.tooltip:hover, a.tooltip:active {
 z-index:25;
 color:;
 background:;
/*
 the color and background actually don't matter for their values,
 it's just that these have to change for IE to apply this style properly.
 Leaving out the color or the background makes this fail in different ways.
*/ 
}

a.tooltip:hover span, a.tooltip:active span {
 display:block;
 position:absolute;
 color:black;
 background-color:#FFFFCC;
 border:1px solid black;
 padding:1px;
 text-align:left;
 top:0;
 left:0;
 margin-top:-1px;
}

td span.s5 {color:#ff0000}
td span.s6 {color:#0000ff}

</style>
<script type="text/javascript">
function labelSubmit(label) {
  document.getElementById('o').value=label;
  document.BackAt.submit();
}
</script>
</head>
<body>
<h1>tooltip Test Page</h1>
<table>
  <tbody>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 3</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some very long tooltip text to demonstrate the  problem by overlapping the cells below.</span></a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 1</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 2</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some tooltip text</span></a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 4</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
    </tr>
    <tr>
      <td><span class="s5">&#x25a0;</span> Name 5</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 5<span>More Notes</span></a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 6</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Yet more notes</span></a></td>
    </tr>
  </tbody>
</table>
</body>
</html>

我遇到的问题是来自其他值的文字通过工具提示文字显示。

将鼠标悬停在第一行第二列上以查看效果。

我正在努力完成一些事情：

使悬停的激活区域更宽，因此将鼠标悬停在“状态6”右侧的某个空间会调出工具提示（例如，目标的总宽度为100-150px）。首先，当我将display:block添加到a.tooltip时，IE终止了悬停。我通过从width:14em删除a.tooltip:hover来解决这个问题。在display.block元素上设置悬停事件+ a的宽度样式确实很糟糕。
更改工具提示的宽度而不更改列/父a元素的宽度（因此工具提示可以更宽并占用更少的垂直空间）。使工具提示的选项改变宽度，其内容最大宽度，此时线条包裹将是很棒的，但在IE中可能是不可能的。只要我在a.tooltip上放置一个宽度，工具提示中位于除悬停源之外的其他行上方的部分就会让文本从这些单元格中显示出来。删除宽度，您将看到文本不再显示。
悬停效果适用于整个工具提示，因此如果工具提示覆盖3行，则向下移动鼠标时，接下来的2行将不会激活，因为光标未离开工具提示。悬停效果是否仅适用于悬停在其上的初始元素而不是工具提示本身，因此向下移动鼠标会在每一行中显示每个工具提示？
如果链接永远不会被激活（它们无法获得焦点），那就太好了。我不知道这是否可能。太糟糕的IE不支持将鼠标悬停在除链接之外的任何元素上。

注意：很快IE6将被放弃，转而支持IE7。如果它有很大的不同，那么IE7可以成为目标浏览器。

感谢您的帮助。

Answer 1

单独使用css无法解决这些问题。如您所知，IE不支持：hover伪选择器，因此您需要通过添加href =“javascript：void（0）;”来呈现您的链接处于非活动状态。到你的链接。

我强烈推荐http://craigsworks.com/projects/qtip/作为jquery解决方案。您可以专门设置悬停条件，功能因js关闭而降低，甚至可以与IE6一起使用。此外，您可以将这些工具提示应用于任何标记，从而解决您的锚定问题。

即使使用此插件，工具提示重叠列表内容仍然存在问题，因此您应将它们放在列表的一侧。这样，您可以将鼠标悬停在列表中，而不会受到工具提示的干扰。

Answer 2

崩溃的答案是IE在悬停时会在许多边缘情况下崩溃，特别是如果某些关键元素没有获取HasLayout。

Baloneysammitch将弹出窗口置于右侧的想法也很好。

CSS IE悬停效果 - 重叠元素，显示：阻止和崩溃

2 个答案: