html - .tooltip 元素中的彩色 CSS 内容

Question

我正在使用 css .tooltip 函数在我的网络应用程序上显示有关链接的一些信息。当鼠标悬停在它上面时，我希望工具提示元素中的内容文本是多色的；即第一个单词的颜色与其余单词的颜色不同。我找到了有关通过 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;
}