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 由 Kyle Sevenoaks 友情提供。

Answer 1

您可以在整个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
}

你不需要重置:hover悬停遗产中的填充，填充形式为a设置的样式。只需重置要在正常状态和悬停状态之间更改的值。

Answer 2

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

此外，尝试发布问题的live examples而不是一长串的HTML和CSS，我们更容易为您提供帮助：）

滚动div内的CSS工具提示

2 个答案: