Question

我有一个带有css overflow：hidden的数据表。现在对于大数字，我想要一个特定的列，这里的第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：

<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>

提前感谢！

Answer 1

你混合css选择这里。

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

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

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

有关非常酷的工具提示，请参阅此 STACK LINK

apex：使用工具提示显示悬停显示值的输出字段

1 个答案: