滾動div內的CSS工具提示

我有一個簡單的CSS幫助彈出窗口，在大多數簡單佈局中一直適用於我。但現在它需要在一個滾動div內工作。滾動div內的CSS工具提示

給出的示例HTML：

<div style="overflow:scroll; width:80px"> 
<a href="#" class="tooltip"> 
an image 
<span>some hidden tooltip which is a bit longer in here</span> 
</a> 
</div>

（注：在現實世界中會有許多東西與滾動DIV中提示）

我有CSS：

a.tooltip span 
{ 
display:none; 
position:absolute; 
padding:0px 0px 2px 2px; 
background:yellow; 
text-decoration:none; 
vertical-align:top; 
} 

a.tooltip:hover span 
{ 
display:inline; 
position:absolute; 
padding:0px 0px 2px 2px; 
top:0; 
left:18px; 
background:yellow; 
text-decoration:none; 
vertical-align:top; 
z-index:5; 
} 

a.tooltip 
{ 
border-width:0px; 
text-decoration:none; 
} 

a.tooltip:hover 
{ 
border-width:0px; 
text-decoration:none; 
position:relative; 
}

是否有可能讓彈出窗口彈出滾動div，所以它的可讀性不會導致div滾動？

這是可以在CSS中獨自使用，而不使用JavaScript？

編輯：Live Example通過凱爾塞文歐克斯友情提供。

來源

2010-05-12 RYFN

我不認爲這是可能的，因爲z-indexes從父項工作，子元素將無法顯示頂部的跨度。這個CSS工具提示僅在<a>懸停時添加了另一個元素。我想你可能不得不去jQuery路線。

此外，嘗試發佈您的問題，而不是HTML和CSS一長串的live examples，很容易讓我們來幫助你:)

來源

2010-05-12 10:35:52 Kyle

我有一個偷偷摸摸的懷疑，可能是這種情況。感謝您鏈接jsFiddle，我將在未來使用它作爲示例！ – RYFN 2010-05-12 10:36:56

沒問題，我總是使用這個工具提示，因爲它非常簡單，但是當涉及到這樣的事情時，我只需要轉到jQuery。有大量的jQuery工具提示，並且大多數很容易實現。 – Kyle 2010-05-12 10:40:47

是的，幸運的是，已經將jQuery整合到了這個特定的項目中，用於其他的事情，所以這可能是最好的選擇。希望檢查，雖然我總是喜歡儘量保持簡單:) – RYFN 2010-05-12 10:46:16

您可以在整個DIV設置:hover。並將你的跨度直接放在div中。（例如，此解決方案在IE6中不起作用）。

看到這裏工作的例子：http://jsfiddle.net/5mASU/1/

或者你也可以更高的z-index設置我的提示，並使用固定的位置，它的工作原理： http://jsfiddle.net/5mASU/3/

也避免懸停復位相同的值這裏是一個清理版本： http://jsfiddle.net/5mASU/4/

例如，如果你設置

a { 
    padding: 5px; 
} 
a:hover { 
    // no need to reset the padding here 
}

您不需要重置在填充形式爲a設置的樣式的填充空白處填充:hover。只需重置要在常規狀態和懸停狀態之間更改的值即可。

來源

2010-05-12 10:36:17 meo

如果您希望工具提示適用於整個DIV，但它不適用於選定的單詞，這是一個很好的解決方案。 – Kyle 2010-05-12 10:47:05

謝謝你，不幸的是，在現實世界中，我有不止一個工具提示內滾動div - 我會更新的問題在這一點上更清晰。 – RYFN 2010-05-12 10:47:55

是的，我知道，但它是純CSS中唯一的解決方案我可以想到，如果你想使用jQuery的工具提示，我建議你這一個：http://flowplayer.org/tools/tooltip/index.html – meo 2010-05-12 10:51:34

滾動div內的CSS工具提示

回答

相關問題