Question

我在我的html文件中创建了一个工具提示，如下所示：

<span title="" class="duedate-warning-msg"></span>

我设置了这样的CSS属性：

.duedate-warning-msg{
     background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
    border-color: #f5c7c7;
    padding: .5em 0.25em 0.5em 2.5em;
    title:"my tooltip";
    color: #D11006;
}

span:hover{
    position:relative;
}

span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background: #0679ca;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

以上样式完美地创建了工具提示。我面临的唯一问题是我想要工具提示的背景颜色是蓝色。但它总是显示灰色。为什么会这样？

Answer 1

很简单，在background-image属性中用您选择的颜色替换#cccccc，假设您要保持淡入淡出（#eeeeee）渐变。

Answer 2

从span[title]:hover:after

中删除背景图片

这是工作Demo

Answer 3

删除background-image并添加background，如下所示：

span[title]:hover:after {
    content: "This statement is past due.";
    padding: 4px 8px;
    color: white;
    font-size:16px;
    font-family: "open_sansregular";
    background: #0679ca;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background: #00F;
}

如何更改工具提示背景颜色？

3 个答案: