0

我有一个带有 css 溢出的数据表：隐藏。现在对于大数字，我想要一个特定的列，这里是第 15 列，使用工具提示启用悬停显示值。悬停部分工作正常并显示值，但输出字段本身未显示任何值。这是使用的样式：

td:nth-child(15):hover {
  background: #e1f1f7;
} /*BG color is a must for IE6*/

td:nth-child(15).tooltip span {
  display:none; width:100px;
  height:20px;
}

td:nth-child(15).tooltip:hover span{
  display:inline;
  position:absolute;
  border:1px solid #cccccc;
  background:white;
  color:#6c6c6c;
}

顶尖：

<apex:column style="border: 1px solid #a1b4bf" styleClass="tooltip">
    <span>whatever</span>
    <apex:outputField value="{!k.Abv_Core_KAM_Total__c}" id="Total" style="background-color:transparent" >

    </apex:outputfield>  
    <apex:facet name="header">{!$ObjectType.Abv_Core_KAM_Competitor_Sales__c.Fields.Abv_Core_KAM_Total__c.Label}</apex:facet>
</apex:column>

提前致谢 ！

4

1 回答 1

0

您在此处混合 css 选择。

display: none;不会渲染元素这意味着永远tooltip:hover不会发生。

我假设您想在 span 元素上显示工具提示。

td:nth-child(15).span:hover + .tooltip {
    display:in-line;
}
td:nth-child(15) .tooltip {
   display:none;
}

查看此堆栈链接以获得非常酷的工具提示

于 2015-01-16T14:25:34.980 回答