代码之家 › 专栏 › 技术社区 › momo

css ie悬停效果-重叠元素、显示:块和崩溃

hover internet-explorer css html

momo · 技术社区 · 15 年前

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

首先,这里是我正在使用的测试页:

<!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 ,在悬停时终止。我决定把它移走 width:14em 从 a.tooltip:hover . 设置悬停事件宽度的样式+ display.block 上 a 元素做坏事。
更改工具提示的宽度而不更改列/父级的宽度 一 元素(因此工具提示可以更宽,占用更少的垂直空间)。使工具提示的宽度更改为最大宽度的选项,此时换行将非常棒,但在IE中可能是不可能的。 工具提示 ,工具提示中位于悬停源以外的其他行上方的部分允许从这些单元格中显示文本。删除宽度,您将看到文本不再显示。
悬停效果应用于整个工具提示,因此,如果工具提示覆盖3行,同时向下移动鼠标,下两行将不会激活,因为光标尚未离开工具提示。悬停效果能否只应用于悬停在上面的初始元素而不是工具提示本身,以便向下移动鼠标将在每行中显示每个工具提示?
如果链接永远不能被激活(他们不能集中注意力),那就太好了。我不知道这是否可能。太糟糕了IE不支持在任何元素上悬停,但链接。

注:很快IE6将被抛弃,取而代之的是IE7。如果有很大的不同,那么ie7可以成为目标浏览器。

谢谢你的帮助。

2 回复 | 直到 14 年前

Baloneysammitch 14 年前

单靠css是无法解决这些问题的。如您所知,ie不支持:hover伪选择器,因此您需要通过向链接添加href=“javascript:void(0);”来使链接处于非活动状态。

我强烈推荐 http://craigsworks.com/projects/qtip/ 作为jquery解决方案。您可以特别设置悬停条件,并且在禁用js时功能会降低,甚至可以在ie6中使用。此外,还可以将这些工具提示应用于任何标记,以解决定位问题。

即使使用这个插件,工具提示与列表内容重叠仍然有问题,因此应该将它们放置在列表的一侧。这样您就可以将鼠标直接悬停在列表上,而不受工具提示的干扰。

momo 14 年前

崩溃的答案是ie在许多边缘情况下都会在悬停时崩溃,特别是在某些关键元素没有获得haslayout的情况下。

Baloneysammitch把弹出窗口放在右边的想法也不错。