是否可以从带有 CSS 的链接中隐藏标题？答案

【问题标题】：Is it possible to hide the title from a link with CSS?是否可以从带有 CSS 的链接中隐藏标题？
【发布时间】：2013-03-12 14:31:34
【问题描述】：

我有一个带有标题属性的锚元素。我想隐藏在浏览器窗口中将鼠标悬停在它上面时出现的弹出窗口。就我而言，不可能做这样的事情，

$("a").attr("title", "");

由于 jQuery Mobile，标题会在某些事件发生后重新出现（基本上每次重绘锚元素时）。所以我希望通过CSS隐藏标题。

类似：

a[title] {
    display : none;
}

不起作用，因为它隐藏了整个锚元素。我只想隐藏标题。这甚至可能吗？不应显示弹出窗口。

【问题讨论】：

不，您不能隐藏工具提示。这不是 CSS 规范的一部分。
How to disable tooltip in the browser with jQuery?的可能重复
那太糟糕了。那我得找点别的了。
@Gatekeeper 这是一个由 jQuery Mobile 创建的工具提示，所以我非常坚持使用它。我只是想让它隐藏:)
另一个想法（远不如您正在寻找的优雅，但可以完成工作）：您可以更改 jQuery Mobile 的行为。我不会直接更改源（通常不是很好的做法），但您可以编写一个扩展，在呈现元素后挂钩并删除标题。

标签： html css hide anchor title

【解决方案1】：

使用以下 CSS 属性将确保标题属性文本不会在悬停时出现：

pointer-events: none;

请记住，JS 是更好的解决方案，因为此 CSS 属性将确保元素永远不会成为任何鼠标事件的目标。

【讨论】：

这也将禁用单击链接后的所有功能。这使得整个链接毫无意义。
是的@Hafenkranich，这就是为什么我在回答中写道“请记住，JS 是更好的解决方案，因为此 CSS 属性将确保元素永远不会成为任何鼠标事件的目标。”跨度>

【解决方案2】：

根据@boltClock 的建议，我觉得CSS 解决方案在这里不合适，因为浏览器决定如何处理链接的标题属性，或者任何与此相关的事情。据我所知，CSS 无法处理这个问题。

如前所述，使用 jQuery 将标题替换为空字符串是行不通的，因为 jQuery mobile 在某些时候会重写它们。然而，这将独立于 JQM 工作，并且不涉及完全删除对 SEO 很重要的 title 属性。

这行得通：

$('a["title"]').on('mouseenter', function(e){
    e.preventDefault();
});

我在测试后将$('body').on('mouseenter') 的初始代码更改为这个。这已确认有效。

【讨论】：

将我的评论从其他答案移到此处：这对我来说不像 CSS。
好吧，@BoltClock，那是因为它不是。 OP 只说像 HE/SHE 包含的 jquery 脚本这样的东西不起作用。因为他使用的是 jquery mobile，所以我正确地假设 jquery 正在用于他的项目，并且 jquery 答案（有效）将是公平的游戏。
如果 jquery 不能处理事件，css 肯定因为 heckfire 也不能。
是的，我是说你需要提到它不是（可能与）CSS，因为这个问题专门要求通过 CSS 来完成，而不是 jQuery。
这不起作用（不再），至少对于最新的 jQuery 不起作用。

【解决方案3】：

你可以将你的内部文本包裹在一个 span 中，并给它一个空的 title 属性。

<a href="" title="Something">
  <span title="">Your text</span>
</a>

【讨论】：

SEO 会喜欢这个
这将是一个不错的解决方案，不幸的是不适用于所有浏览器（例如，如果目标元素的 title 为空，则 Safari 通过使用父 title 显示工具提示）
如果您要破坏这样的辅助功能，最好一开始就不要使用它。
这被证明是 MediaWiki 等托管环境中唯一可行的解决方案。
当，很聪明。

【解决方案4】：

在 CSS 中这是不可能的，因为您只能将内容添加到 DOM（通常使用 :before :after 和 content: '...';，不能删除或更改属性。

唯一的方法是创建一个实时自定义事件（例如"change-something"）：

$("a").on("change-something", function(event) { this.removeAttr("title"); });

并触发每个更改：

... $("a").trigger("change-something");

【讨论】：

【解决方案5】：

尝试使用此更改您的代码

$(document).ready(function() {
    $("a").removeAttr("title");
});

这将删除标题属性，因此在链接上悬停时不会出现提示标签

【讨论】：

搜索引擎优化和隐藏/删除的内容

【解决方案6】：

完整的纯 JavaScript 解决方案

var anchors = document.querySelectorAll('a[title]');
    for (let i = anchors.length - 1; i >= 0; i--) {
    anchors[i].addEventListener('mouseenter', function(e){
        anchors[i].setAttribute('data-title', anchors[i].title);
        anchors[i].removeAttribute('title');
        
    });
    anchors[i].addEventListener('mouseleave', function(e){
        anchors[i].title = anchors[i].getAttribute('data-title');
        anchors[i].removeAttribute('data-title');
    });
}

【讨论】：