34

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

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

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

就像是：

a[title] {
    display : none;
}

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

4

6 回答 6

26

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

pointer-events: none;

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

于 2016-03-07T19:50:05.537 回答
12

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

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

这有效：

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

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

于 2013-03-27T04:14:12.830 回答
12

您可以将内部文本包装在一个跨度中，并为其提供一个空的标题属性。

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

于 2016-07-08T11:44:12.470 回答
2

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

唯一的方法是创建一个实时自定义事件（es. "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/

于 2013-03-12T15:06:31.613 回答
1

尝试使用此更改您的代码

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

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

于 2016-01-10T15:11:42.990 回答
-1

完整的纯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');
    });
}
于 2021-06-11T13:32:50.967 回答