•  03-07-2019
  •  | 
  •  

题

有没有办法抑制链接上的弹出标题，但仍然将它们保留在视障人士的页面上？

有帮助吗？

解决方案

这是浏览器解释链接标题并显示工具提示/弹出窗口的功能。没有办法抑制它们。我试过了（因为客户也不喜欢它们）并且没有办法绕过它们。

其他提示

我知道这已经解决，但我也发现了这个解决方法：使用jQuery隐藏原生工具提示

我遇到了一个项目，客户希望显示自己的工具提示（使用CSS完成），但由于浏览器启动的工具提示也显示，因此它显示了两次。我们通过删除'title'属性并使用'data'来填充CSS中的文本来解决这个问题。

我不确定你的意思是将它们留在视障人士的页面上，因为它们只在源代码中可见？

例如：

<a href="link" title="something">Link title here</a>

会在页面上显示“链接标题”链接以及悬停在其上的恼人弹出窗口。

<a href="link" data="something">Link title here</a>

会显示“链接标题在这里”的链接，但不会在悬停时显示恼人的弹出窗口，但你仍然可以使用data标签来引用你想要放在那里的任何内容（在我们的例子中，我们将文本放在CSS引用的工具提示）。

显然，如果你完全删除了标题标签，问题就解决了，但你说你需要把它保留在那里，所以这是我之前使用的解决方法。

这适用于jQuery。

var val;
$('[YOUR_SELECTOR]').hover(function() {
    val = $(this).attr('title');
    $(this).removeAttr('title');
  },function() {
    $(this).attr('title',val);
})

...它可能不太理想，但您可以随时尝试代替title中的<a href>属性，<span>标签内的<a>：

/* screen.css */

a   { }

a span.titleText {
    display: none;
    position: absolute;
    bottom: 1.2em;
    left: 0;
}

a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
    display: block;
}

/* audio.css */

a span {
    display: inline; /* or whatever the relevant attribute would 
                        be in an audio stylesheet. */
}

<head>
    <link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>

<a href="http://some.url.com">
    <span class="titleText">This is the title</span>This is the link
</a>
但是，我并不认为这是一个特别实用的解决方案。我相当肯定它不会验证。如果我认识JS，我会建议一些更可行的东西，但即便如此，我也不相信它会起作用。

我的浏览器中的链接不会显示类似的工具提示，除非它们具有title属性。

如果您愿意，可以使用 Greasemonkey 来运行在evey页面上的一些javascript删除它们。

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top