是否可以通过CSS链接隐藏标题？

Question

我有一个带title属性的anchor元素.我想隐藏在浏览器窗口中将鼠标悬停在其上时出现的弹出窗口.在我的情况下,不可能做这样的事情,

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

由于jQuery Mobile,标题将在某些事件发生后重新出现(基本上每次重新绘制锚元素时).所以我希望通过CSS隐藏标题.

就像是:

a[title] {
    display : none;
}

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

Answer 1

使用以下CSS属性将确保悬停时不显示标题属性文本:

pointer-events: none;

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

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

Answer 2

根据@ boltClock的建议,我会说我觉得CSS解决方案不合适,因为浏览器决定如何处理链接的title属性,或者其他任何事情.据我所知,CSS无法处理这个问题.

如前所述,使用jQuery用空字符串替换标题不会起作用,因为jQuery mobile会在某些点重写它们.但是,这将独立于JQM工作,并不涉及完全删除SEO重要的title属性.

这有效:

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

我$('body').on('mouseenter')在测试后将我的初始代码改为了.这证实有效.

这不起作用（不再），至少不适用于最新的 jQuery。 (3认同)
好吧，@BoltClock，那是因为事实并非如此。OP只说像HE/SHE包含的jquery脚本之类的东西不起作用。因为他使用的是 jquery mobile，所以我正确地假设 jquery 正在用于他的项目，并且 jquery 答案（有效）将是公平的游戏。 (2认同)
是的,我说你需要提一下它不是(可能)CSS,因为这个问题特别要求通过CSS而不是jQuery来实现. (2认同)

Answer 3

您可以将您的内部文本包装在一个跨度中，并给其一个空的title属性。

<a href="" title="Something" class=".some-tooltip-class"><span title="">Your text</span></a>

Answer 4

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

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

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

并触发每一个变化：

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

更多信息和演示在这里：