.tooltip元素中的多彩CSS內容

Question

我使用css .tooltip函數來顯示一些關於我的web應用程序上的鏈接的信息。當鼠標懸停在它上面時，我希望工具提示元素中的內容文本是多色的;即第一個單詞將與其餘單詞的顏色不同。我發現有關通過html更改顏色的文章，但這對我來說沒有幫助，因爲我使用的是css .tooltip。

CSS代碼在這裏：

.tooltip:hover:after{ 
    background: #BABABA; 
    border-radius: 0px; 
    top: 15px; 
    font: 12px MyWebFont250, serif; 
    color: #666666; 
    line-height: 200%; 
    content: "Word is Pudaes nonsequi dolo magni acipsam sam, con et et que et ilit accabo. Nam qui officit ent qui coribus dolorem quissite exeraecae porupta eptaqui nia pliquibus, cum quia esedit. \A \A Proris ulluptaes et lautecti ad u lltem acestibusdae cuptati untur, eume et anim dolut iunt, cumqui ullut arum aut doluptatem."; 
    white-space: pre-wrap; 
    text-align: left; 
    left: 0px; 
    padding: 15px 15px; 
    position: absolute; 
    z-index: 100; 
    width: 250px; 
    box-shadow: 5px 5px 5px #AAAAAA; 
} 

而且，我知道CSS應該用於格式化和HTML內容，但我不知道如何把內容到.tooltip元素，除非我使用類似content: attr(title);代替上述內容行，然後將所有上述內容（「Word is Pudaes nonsequi ...」）放入HTML中的title屬性中。這仍然無助於解決我的多彩文本要求。

Answer 1

您可以在HTML中創建工具提示，隱藏它，然後在工具提示文本突出顯示時顯示它。然後，您可以使用適當的HTML標記來強調顏色。在這種情況下使用<strong>。

Have a fiddle!

HTML

<p> 
    <a>hover me</a> 
    <span class="tooltip"><strong>This</strong> is my tooltip</span> 
</p> 

CSS

.tooltip { 
    background: #BABABA; 
    border-radius: 0px; 
    font: 12px MyWebFont250, serif; 
    color: #666666; 
    line-height: 200%; 
    text-align: left; 
    padding: 15px 15px; 
    z-index: 100; 
    width: 250px; 
    box-shadow: 5px 5px 5px #AAAAAA; 
    display: none; 
} 
.tooltip strong { 
    color: #F00; 
} 
a { 
    cursor: pointer; 
} 
a:hover + .tooltip { 
    display: block; 
}