css - 使用 jQuery 与 CSS3 :after 并行设置属性上的标题

Question

您好，我正在使用它来设置元素的标题属性:

$('.upgradeTables thead tr td:gt(1)').attr('title', 'Upgrade To');

然后我将使用 CSS3 来执行此操作:

.upgradeTables thead tr td:hover:before
{
    background: #000;
    content: attr(title);
    color: #f7f7f7;
    opacity: 0.95;
    display: block;
    font-weight: bold;
    position: relative;
    text-align: center;
    top: 0px;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 10px 0.5px #333 !important;
    -moz-box-shadow: 1px 1px 10px 0.5px #333 !important;
    box-shadow: 1px 1px 10px 0.5px #333 !important;
}

我的问题是，当我将鼠标悬停在元素上时，漂亮的 CSS 标题会按照我的意愿显示，我可以沿着 TD 移动，并且“升级到”出现在每个元素上方。

问题是，当我将鼠标悬停在第一个上时，我得到了 CSS 标题，但当我移动到其他 TD 时，默认的灰色浏览器标题出现并保持可见。我如何隐藏弹出的默认标题，但仍保持 CSS:after title 在悬停时可见？

Answer 1

不幸的是，没有简单的 CSS 方法可以使用 CSS 禁用工具提示。我建议在您的示例中使用 title 属性无论如何都不是真正的语义(title 属性旨在解释链接背后的内容)。

替代方法是使用 html5's data attributes ，这将使您的代码看起来像...

$('.upgradeTables thead tr td:gt(1)').attr('data-tooltip', 'Upgrade To');

和你的CSS声明...

content: attr(data-tooltip);