CSS IE 悬停效果 - 重叠元素、显示：块和崩溃

Posted 2023-05-08

技术标签:

【中文标题】CSS IE 悬停效果 - 重叠元素、显示：块和崩溃【英文标题】：CSS IE Hover Effect - Overlapping Elements, Display:Block, and Crashes 【发布时间】：2011-01-23 23:06:26 【问题描述】：

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

首先是我正在使用的测试页面：

<!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-150 像素的目标总宽度）。起初，当我将display:block 添加到a.tooltip 时，IE 在悬停时终止。我通过从a.tooltip:hover 中删除width:14em 解决了这个问题。在 a 元素上设置悬停事件的宽度 + display.block 会做坏事。

在不改变列/父 a 元素的宽度的情况下更改工具提示的宽度（因此工具提示可以更宽并占用更少的垂直空间）。使工具提示的宽度随着其内容的最大宽度而改变的选项，此时换行会很棒，但在 IE 中可能是不可能的。一旦我在a.tooltip 上设置了宽度，工具提示中位于悬停源之外的其他行上方的部分就会让文本从这些单元格中显示出来。删除宽度，您会看到文本不再显示。

悬停效果适用于整个工具提示，因此如果工具提示覆盖 3 行，则在向下移动鼠标时，由于光标尚未离开工具提示，接下来的 2 行将不会激活。悬停效果是否仅适用于悬停的初始元素而不是工具提示本身，因此向下移动鼠标将显示每行中的每个工具提示？

如果链接永远无法激活（它们无法获得焦点），那就太好了。我不知道这是否可能。可惜 IE 不支持将鼠标悬停在除链接之外的任何元素上。

注意：很快 IE6 将被 IE7 取代。如果有很大的不同，那么IE7可以作为目标浏览器。

感谢您的帮助。

【问题讨论】：

“我遇到的问题是来自其他值的文本通过工具提示文本显示。”您的 HTML/CSS 似乎在 IE 8 中工作 【参考方案1】：

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

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

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

【讨论】：

【参考方案2】：

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