1
在相當簡單的網頁中，當懸停在某些鏈接上時，會出現一些類似工具提示的文本。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">■</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">■</span> Name 1</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
</tr>
<tr>
<td><span class="s6">■</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">■</span> Name 4</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
</tr>
<tr>
<td><span class="s5">■</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">■</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可以成爲目標瀏覽器。
感謝您的幫助。
「我遇到的問題是來自其他值的文本通過工具提示文本顯示。」你的HTML/CSS似乎在IE 8中工作 – contactmatt 2010-03-09 06:23:54