某个类的所有跨度的标题的css

Question

我正在使用 javascript 将跨度动态添加到我页面上的 html，并为这些跨度提供类“query_error”和基于 err_msg 值的动态标题，例如，

"<span class=query_error title='" + err_msg + "'>" + replacement + "</span>"

(其中“替换”只是有查询错误的一段文本)。所有这一切都很好，我可以将 css 应用于跨度

.query_error{
    font-family: "Monaco", "Inconsolata", Courier, monospace;
    font-size: 15px;
    font-weight: bold;
    color: red;
}

但我不知道如何将 css 添加到标题本身，以便我可以更改字体颜色、大小等。这可能吗(不使用插件)？
时间差

Answer 1

使用 CSS3，您现在可以定位 [title] 属性，但至于现实世界的解决方案，我看不到任何解决方案。我宁愿建议您使用插件，例如 tipsy对于该任务，因为它更多地支持跨浏览器并且更少大惊小怪。

这是样式化 [title] 属性的演示:

CSS

span:hover {
    color: red;
    position: relative;
}

span[title]:hover:after {
    content: attr(title);
    padding: 4px 8px;
    color: #333;
    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);
}

演示:http://jsfiddle.net/BvGHS/