您的位置: 首页  >  技术问答  >  CSS IE悬停效果 - 重叠元素，显示：块和崩溃

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

分类: 技术问答 • 2022-05-29 12:52:20
问题描述：

在相当简单的网页中，当悬停在某些链接上时，会出现一些类似工具提示的文本。CSS IE悬停效果 - 重叠元素，显示：块和崩溃

首先，这里的测试页，我的工作：

<!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。造型上的悬停事件的宽度+ display.block在a元素上会做坏事。

  • 更改工具提示的宽度而不更改列/父元素的宽度a元素（所以工具提示可以更宽并且占用更少的垂直空间）。使工具提示改变宽度与其内容达到最大宽度的选项，在这一点线条包装将是真棒，但在IE中可能不可能。只要我在a.tooltip上放置了一个宽度，那么位于其他行之上而不是悬停源的工具提示部分将让文本通过这些单元显示出来。删除宽度，你会看到文本不再显示。

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

  • 这将是很好，如果链接永远不会被激活（他们不能把焦点）。我不知道这是否可能。太糟糕的IE不支持悬停在任何元素，但链接。

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

感谢您的帮助。

+0

“我遇到的问题是来自其他值的文本通过工具提示文本显示。”你的HTML/CSS似乎在IE 8中工作 – contactmatt 2010-03-09 06:23:54

答

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

Baloneysammitch将弹出窗口放在右侧的想法也很好。

答

你不能用css单独解决这些问题。如你所知，IE不支持：hover伪选择器，所以你需要通过添加href =“javascript：void（0）;”到您的链接。

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

即使有了这个插件，您仍然遇到工具提示重叠列表内容的问题，所以您应该将它们放在列表的一侧。这样，您可以将鼠标悬停在列表中，不受工具提示的干扰。

相关推荐