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是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;
}

.tooltip元素中的多色CSS内容

1 个答案: