有没有可能用CSS隐藏链接的标题?

wgeznvg7  于 2023-01-27  发布在  其他
关注(0)|答案(7)|浏览(146)

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

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

由于jQueryMobile的原因,标题会在某些事件发生后重新出现(基本上每次锚元素被重绘时),所以我希望通过CSS隐藏标题。
比如:

a[title] {
    display : none;
}

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

ugmeyewa

ugmeyewa1#

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

pointer-events: none;

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

wmtdaxz3

wmtdaxz32#

您可以将内部文本 Package 在span中,并给予它一个空的title属性。

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

mkshixfv3#

根据@boltClock的建议,我会说我觉得CSS解决方案在这里不合适,因为浏览器决定如何处理链接的title属性,或者任何相关的事情。据我所知,CSS无法处理这个问题。
如前所述,使用jQuery将title替换为空字符串是行不通的,因为jQuery mobile会在某些时候重写它们。然而,这将独立于JQM工作,并且不涉及完全删除title属性,这是SEO的重要内容。
这是可行的:

$('a["title"]').on('mouseenter', function(e){
    e.preventDefault();
});
  • 我在测试后将我的初始代码$('body').on('mouseenter')更改为这个。这被确认工作。*
p5fdfcr1

p5fdfcr14#

在CSS中,这是不可能的,因为你只能向DOM添加内容(通常是:before :aftercontent: '...';,不能删除或更改属性)。
唯一的方法是创建实时自定义事件(例如"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/

lf5gs5x2

lf5gs5x25#

尝试使用此更改代码

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

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

siv3szwd

siv3szwd6#

$("#test").tooltip({title: false});

title属性的默认值为true,请将其设置为false。这仅在引导工具提示的情况下有效

ubbxdtey

ubbxdtey7#

完整的纯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');
    });
}

相关问题