Question

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

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

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

类似的东西：

a[title] {
    display : none;
}

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

Answer 1

使用以下CSS属性可确保在悬停时不显示标题属性文本：

pointer-events: none;

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

Answer 2

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

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

这有效：

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

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

Answer 3

您可以将内部文本包装在一个范围内，并为其指定一个空标题属性。

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

Answer 4

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

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

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

并触发每项更改：

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

此处提供更多信息和演示：

http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/

Answer 5

尝试使用此

更改您的代码

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

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

Answer 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');
    });
}

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

6 个答案: