滚动div内的CSS工具提示

Question

我有一个简单的CSS帮助弹出窗口，在大多数简单布局中一直适用于我。但现在它需要在一个滚动div内工作。

给出的示例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通过凯尔塞文欧克斯友情提供。

Answer 1

我不认为这是可能的，因为z-indexes从父项工作，子元素将无法显示顶部的跨度。这个CSS工具提示仅在<a>悬停时添加了另一个元素。我想你可能不得不去jQuery路线。

此外，尝试发布您的问题，而不是HTML和CSS一长串的live examples，很容易让我们来帮助你:)

Answer 2

您可以在整个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。只需重置要在常规状态和悬停状态之间更改的值即可。